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全 教学 微 视频 ( 237 节 ) 
全 拓展 微 阅 读 ( 20 项 ) 

全 在 线 微 练习 ( 124 个 ) 
全 实例 源 代码 ( 201 项 ) 


清华 社 大 系 
网 络 开 发 视频 大 讲 室 


移动 上 咒 /PC 疹 同 步 学 习 ，QQ 和 群 / 微 信和 群 随 时 和 从 群 。 


先 观摩 ， 再 临摹 ， 高 手 案 头 单 备 ， 随 时 查阅 提升 。 


随 用 随 取 ， 提 升 设计 效率 ， 快 速 进 阶 开 发 高 手 行列 。 


前 端 科技 昌 编 车 


会 前端 案例 资源 库 ( 4900 个 ) 
铺面 试题 库 ( 1036 道 ) 

全 网 页 模板 库 ( 1500 套 ) 

全 设计 素材 库 ( 12000 个 ) 
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”网 络 开 发 视频 大 讲堂 


“视频 大 讲 富 ”大 系 


清华 和 社 


jQuery 从 入 门 到 焰 迪 
(短评 精 编 啤 ) 


前 端 科技 ”编著 


清华 大 学 出 版 社 
北 下 


内 容 简介 
《jQuery 从 入 门 到 精通 ( 微 课 精 编 版 )》 通 过 理论 与 实践 相 结 合 的 方式 ,由 浅 入 深 \ 循 序 渐进 地 介绍 了 jQuery 库 的 使 用 ， 

并 对 其 源码 进行 解析 。 全 书 内 容 包 括 jQuery 基础 知识 、 内 核 详解 和 应 用 开发 三 部 分 ， 共 计 16 章 ， 包 括 初 识 jQuery、 解 

析 jQuery 框架 、 解 析 Sizzle 选择 融 引 擎 、 定 义 jQuery 对 象 、 过 滤 jQuery 对 象 、 解 析 DOM 模块 、 操 作 DOM、 使 用 CSS、 

jQuery 动画 、jQuery 事件 、 使 用 Ajax、jQuery 工具 、jQuery 插件 、 使 用 jQuery 设计 微 博 系统 、 使 用 jQuery 开发 网 店 、 使 

用 jQuery 开发 Web 应 用 等 内 容 。 本 书 内 容 新 帘 全 面 ， 不 仅 讲 解 了 jQuery 技术 本 号 的 方方面面 ， 而 且 还 包括 与 jQuery 相关 

的 扩展 知识 。 书 中 每 个 知识 点 都 配 有 完整 的 示例 ,不 仅 能 满足 该 者 系统 学 习 理论 知识 的 需求 ,还 能 满足 读者 充分 实践 的 需求 。 
除 纸 质 内 容 外 ， 本 书 还 配备 了 多 样 化 、 全 方位 的 学 习 资 源 ， 主 要 内 容 如 下 。 


237 节 同 步 教 学 微 视频 344 个 实例 和 案例 分 析 
15000 项 设计 素材 资源 48 本 权威 参考 学 习 手 册 
20 项 拓展 知识 微 阅读 124 个 在 线 微 练 习 
4800 个 前 端 开发 案例 1036 这 企业 面试 真题 


本 书 内 容 翔 实 、 结 构 清 晰 、 循 序 渐进 ， 不 仅 适 合 Web 开发 人 员 阅 读 和 参考 ， 也 适合 广大 网 页 制作 和 设计 的 学 生 阅 
该 和 学 习 ， 还 适合 中 、 高 级 用 户 进一步 学 习 和 人 参考。 
本 书 封面 贴 有 清华 大 学 出 版 社 防 伪 标 签 ， 无 标签 者 不 得 销售 。 
版 权 所 有 ， 侵 权 必 究 。 侵 权 举 报 电 话 : 010-62782989 13701121933 
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如 何 使 用 本 书 


本 书 提供 了 多 样 化 、 全 方位 的 学 习 资源 ， 帮 助 读者 轻松 掌握 jQuery 开发 技术 ， 从 小 白 快速 成 长 为 前 端 
开发 高 手 。 


视频 讲解 


在 线 练习 


手机 端 +PC 端 ， 线 上 线 下 同步 学 习 
1， 获 取 学 习 权限 


学 习 本 书 前 ， 请 和 完 刊 开 图 书 封底 的 二 维 人 码 涂 层 ， 使 用 手机 扫描 ， 即 可 获取 本 书 资 源 的 学 习 权限 。 再 扫 
描 正文 章节 对 应 的 3 类 二 维 码 ， 可 以 观看 视频 讲解 阅读 线 上 资源 和 在 线 练 习 提 升 ， 全程 易 刷 、 好 学 、 癌 
效 、 实 用 。 


刊 开 浴 层 ,扫描 获取 学 习 权 限 


2.， 观看 视频 讲解 

对 于 初学 者 来 说 ， 精 彩 的 知识 讲解 和 透彻 的 实例 解析 能 够 引导 其 快速 入 门 ， 轻 松 理 解 和 掌握 知识 要 点 。 
本 书 中 大 部 分 案例 都 录制 了 视频 ， 可 以 使 用 手机 在 线 观 看 ， 也 可 以 离线 观看 ， 还 可 以 推送 到 计算 机 ， 在 大 
屏幕 上 观看 。 


下 载 视频 至 手机 ， 推送 视频 至 邮箱 ， 
离线 流畅 观看 随时 在 PC 端 观看 


zy 以 入 门 到 精通 ( 币 课 精 编 县 ) 


3. 拓展 线 上 阅读 


一 本 书 的 厚度 有 限 ,但 掌握 一 门 技术 却 需 要 大 量 的 知识 积累 。 本 书 i 
的 核心 知识 点 放 在 书 中 ， 而 将 大 量 的 拓展 性 知识 放 在 云 盘 F， 读者 扫描 “ 线 上 阅读 ”二 维 码 ， 
读数 百 页 的 前 端 开发 学 习 资 料 ， 获 取 大量 的 额外 知识 。 


选择 了 那些 与 学 习 、 就 业 关 系 紧 密 


印 可 例 避 阅 


量 章 重症 口 中 辐 ] 称 动 全 11:01 Et | 上 晶 章 二 站 口 中 车 | 移动 党 11:01 
X 在 线 阅读 


天 师 开 皮 


三 线 ! 虽 谍 


| .二 中 
| 8.1.2 使 用 style 
| 将 一 页 知识 收藏 到 邮箱 | | 手机 国 和 桌面 
拓展 为 两 页 [年 帮 | 图 15.3 使 用 cssText 属 性 获取 行内 样式 


进行 在 线 练习 


[ 微 阅 读 ] 


[拓展 ]】 

非 IE 浏 览 器 也 支持 style 快 捷 访 问 方式 ， 但 是 它 
无 法 长 妈 style 对 象 申 指定 序号 位 置 的 属性 名 称 ， 此 
时 可 以 他 用 cssText 属 性 读 职 宝 部 style 属 性 慎 ， 惜 助 ] 
nvascript 方 法 再 把 返回 字符 串 怠 开 为 数组 ， 

【示例 并 在 下 面 示例 中， 使 用 sssTewt 读 取 全 
部 行内 样式 字符 串 ， 然 后 司 用 String 的 plit0 方 法 把 
字符 串 占 开 为 数组 ， 使 用 for in 语 句 遍 历数 组 ， 逐 一 
读 孤 上 每 个 样式 ， 再 使 用 slit0 方 法 刁 开 属性 和 属性 
名 ， 最 后 格式 化 输出 显示 ， 演 示 效 果 如 图 15.3 所 示 


a Bl es 


使 用 getAttributej) 方 法 也 可 以 获取 style 属 性 届 
:下 过 该 方法 返回 值 保留 style 属 性 值 的 原 嫉 阁 样 ， 
而 cssText 属 性 返回 慎 可 能 经 过 浏览 器 钼 理 ， 且 杯 同 
浏览 器 返回 值 覆 式 蜂 有 焉 同 。 
【示例 7] 收 改 上 面 示例 的 代码 ， 使 用 getAtirib 
un 方 潜 获 取 行 肉 样式 字符 串 六 息 ， 
二 BED 
window.onload = fumetionl 
Vit box 一 docurment.eetElementy Ldl™ be”): 
var stf = bow. getAttributel Style hi; 
var a = sir.splte":"); 
var 迪 trip="": 
tor(var b in a)1 
var prop = afb].splin™:"); 


< 


为 方便 读者 巩固 基础 知识 ， 提 升 实战 能 力 ， 本 书 附 赠 了 大 量 的 前 端 练习 题目 。 读 者 扫描 最 后 
线 练习 ”二 维 码 ， 即 可 通过 反复 的 实 操 训 练 加 深 对 知识 的 领悟 程度 。 


学 习 + 模 仿 + 练 习 ， 
打造 超 强 实战 能 力 


5. 其 他 PC 端 资源 下 载 方式 
的 可 以 直接 将 视频 、 拓 展 阅 读 等 资源 推送 到 邮箱 之 外 ， 


除了 前 面 介 
取 方 式 。 


如 -证 
绍 过 


重重 生生 口 由 国 穆 动 全 11:02 
人 
前 端 开 友 
江门 
jQuery 操作 DOM 


DOM 是 Documentl Object Model 的 编写 ， 
其 便 沈 是 广 档 对 象 模 型 。DOM 是 一 种 蹊 浏 览 
器 .平台 以 及 语言 都 没有 关系 的 规范 ， 本 质 上 就 
是 一 个 接口 。 它 提供 一 种 可 以 访问 页 面 中 所 有 节 
点 的 机 制 。 本 专题 主要 介绍 如 何 使 用 j 避 uery 操 作 
局 已 M 元 素 。 


下 载 Query 库 及 相关 持 件 朗 件 jquery 


1. jQuery 将 事件 和 函数 绪 定 到 元 素 


2.jauery 如 何 从 元 京 中 除去 HTML 标 等 


| 进入 练习 | 


A 


重重 重重 口 中 国 穆 动 全 11:03 
X 设备 模拟 器 


jQuery 如 何 从 元 素 中 除去 
HTMIL 标签 

人 各 元 素 中 阶 才 HTMIL 标 答 | 

|1jiQuery | 如 何 从 元 素 中 除去 HTML 标 签 


jQuery | 如 何 从 元 素 中 除去 HTML 标 签 


B liQuery 如 何 从 元 素 中 除去 HTML 标签 


还 提供 了 如 下 几 种 PC 端 资源 获 


如何 使 用 禁书 


回 ”登录 清华 大 学 出 版 社 官方 网 站 ( www.tup.com.cn )， 在 对 应 图 书页 面 下 查找 资源 的 下 载 方 式 。 
四 申请 加 入 QQ 群 、 微 信 群 ， 获 得 资源 的 下 载 方式 。 
加 ”扫描 图 书 封 展 “ 文 果 云 嚼 ”二 维 码 ， 获 得 资源 的 下 载 方式 。 


小 自学 习 电子 书 


为 方便 读者 全 面 提升 ， 本 书 赠 送 卫 “前端 开 发 自问 特 答 ”小 日 学 习 电 子 书 。 这 些 内 容 精 挑 细 选 ， 硕 望 


成 为 您 学 习 路 上 的 好 帮手 ， 关 键 时 刻 解 您 所 需 。 


| 


正太 总 习 ee 网 了 生性 于 需要 地 二 再 具 田 胃 广 了 开标 机 可 本 芝 帮 一 丰 : 


一 -一 一 -acer 二 Eco 
攻 思 只 T-to 二 "- 反 
已 三 蚂 丫 旺 元 me 
| 量 里 交 克 古 且 后 中 ， 了 区 圳 别 避 国有 时 T= 扶正 甩 
而 三 a = 网 记 汪 并 二 各 坟 人 本 
| 于 后 忆 三 也 有 工 
一) ER 
rosin 全 站 员 和 寺 旦 直 ， 完 风量 的 五 寺 在 个 条 下 代 下 亲王 光 到 区， 
所 量 遇 到， 所 二 而 吴 再， 是 后 至 到 已 片 坟 醒 对 由 全 。 陕 归 嘻 让 二 和 忌 加 所 
于 rs 
中 衬 下 昌 加 卫 因 站 同意 号 尝 宙 则 
吾 | 


从 小 白 到 高 手 的 赔 变 


谷歌 的 创始 人 拉 里 : 佩 奇 说 过 ， 如 果 你 刻意 练习 某 件 事 超过 10000 个 小 时 ， 那 么 你 就 可 以 达到 世界 级 。 

因此 ， 不 管 您 现在 是 怎样 的 前 端 开 发 小 白 ， 只 要 您 按照 下 面 的 步骤 来 学 习 ， 假 以 时 日 ， 您 会 成 为 令 自 
己 惊 讶 的 技术 大 咖 。 

(1 ) 扎实 的 基础 知识 + 大 量 的 中 小 实例 训练 + 有 针对 性 地 做 一 些 

(2 ) 大 量 的 项 目 案 例 观摩 、 学 习 、 操 练 ， 塑 造 一 定 的 项 目 思维 。 

(3 ) 善于 借用 他 山 之 石 ， 对 一 些 成 熟 的 开源 代码 、 设 计 素 材 ， 能 够 做 到 拿 来 就 用 ， 学 会 站 在 巨人 的 肩 
膀 上 。 

(4 ) 多 参阅 一 些 官方 权威 指南 ， 折 展 自己 对 技术 的 理解 和 应 用 能 力 。 

(5 ) 最 为 重要 的 是 ， 多 与 同行 交流 ， 在 切磋 中 不 断 进步 。 

书本 厚度 有 限 ， 学 习 空 间 无 限 。 纸 张 价格 有 限 ， 知 识 价值 无 限 。 希 望 本 书 能 帮 您 真正 收获 知识 和 学 习 
的 乐趣 。 最 后 ， 祝 您 阅读 快乐 ! 


综合 案例 。 


Preface 


“网 络 开 发 视频 大 讲演 ”系列 丛书 因 其 编写 细腻 、 讲 解 透彻 、 实 用 易学 、 配 备 全 程 视频 等 ， 备 受 读者 欢 
迎 。 从 书 累计 销售 超 20 万 册 ， 其 中 ,《HIMLS+CSS3 从 人 门 到 精通 》 累 计 销 售 10 万 册 。 同 时 ， 系 列 书 被 
上 百 所 高 校 选 为 教学 参考 用 书 。 

本 次 改版 ， 在 继承 前 版 优点 的 基础 上 ， 进 一 步 对 图 书 内 容 进行 了 优化 ， 选 择 面 试 、 就 业 最 急需 的 内 容 ， 
重新 录制 了 视频 ， 同 时 增加 了 许多 当前 流行 的 前 端 技术 ， 提 供 了 “入 门 学 习 一 实例 应 用 一 项 目 开 发 一 能 力 
测试 一 面试 ”等 各 个 阶段 的 海量 开发 资源 库 ， 实 战 容量 更 大 ， 以 帮助 读者 快速 掌握 前 端 开 发 所 需要 的 核心 
精髓 内 容 。 

jQuery 是 功能 丰富 的 JavaScript 库 ， 可 以 帮助 用 户 轻 松 地 把 动态 功能 应 用 到 网 页 。 它 的 体积 很 小 ， 代 码 
风格 独特 而 又 优雅 ,改变 了 JavaScript 程序 员 编 写 程序 的 方式 和 思路 。jQuery 的 语法 简单 易学 ， 而 且 具 有 
很 强大 的 跨 平 台 性 ， 可 以 兼容 多 种 核心 的 浏览 祷 。 目 前 , 已 经 有 一 百 多 个 插件 来 扩充 jQuery 的 功能 ， 使 得 
jQuery 能 满足 几乎 所 有 客户 端的 脚本 开发 。 

本 书 通 过 理论 与 实践 相 结 合 的 方式 ， 由 浅 入 深 、 循序 渐进 地 介绍 了 jQuery 库 的 使 用 ， 同 时 又 辅 以 大 量 
真实 的 开发 案例 ， 可 以 让 用 户 很 轻松 地 使 用 jQuery 来 增强 网 页 的 互动 性 ， 做 出 更 好 的 Web 前 端 产品 和 各 种 
更 炫 更 酷 的 效果 。 如 果 读 者 简单 了 解 HIML 、CSS 和 JavaScript 基础 知识 ， 那 么 这 本 书 正 是 为 你 而 准备 的 。 
因为 本 书 涵 盖 了 利用 jQuery 展开 工作 时 可 能 遇 到 的 大 多 数 问题 。 


本 书 内 容 


jQuery 基础 

jQuery 设计 原理 

jQuery 框架 实现 

选择 器 引擎 设计 原理 

选择 器 框架 结构 设计 

选择 器 的 实现 和 应 用 示意 图 、 流 程 图 、 效 果 图 
过 滤 jQuery 对 象 方法 和 用 法 

DOM 模 块 设计 分 析 精彩 实例 


操作 DOM 
使 用 CSS 
设计 动画 
使 用 jQuery 事件 Pp 
人 注意 、 提 示 、 说 明 
jQuery 插件 


拓展 微 阅读 


前 端 开发 资源 库 
设计 微 博 系统 
设计 网 上 商店 
设计 电子 相册 


zy 以 入 门 到 精通 ( 币 课 精 编 且 ) 


本 书 特 扣 


1. 由 浅 入 深 ,， 编 排 合 理 ， 实 用 易学 


本 书 系统 地 讲解 了 jQuery 技术 在 网 页 设计 中 的 应 用 ， 同 时 剖析 jQuery 源码 ， 循 序 渐 进 ， 配 合 大 量 实例 ， 
帮助 读者 完全 掌握 jQuery 技术 。 


2. 跟着 案例 和 视频 学 ， 入 1 更 容 易 


跟着 例子 学 习 ， 通 过 训练 提升 ， 是 初学 者 最 好 的 学 习 方 式 。 本 书 案 例 丰 富 详尽 ， 且 都 附 有 详尽 的 代码 
注释 及 清晰 的 视频 讲解 。 跟 着 这 些 案例 边 做 边 学 ， 可 以 避免 学 到 的 知识 流 于 表面 、 限 于 理论 ， 尽 情感 受 编 
程 带 来 的 快乐 和 成 就 感 。 


3. 三 大 类 线 上 资源 ， 多 元 化 学 习 体 验 


为 了 传递 更 多 知识 ， 本 书 力 求 突 破 传统 纸 质 书 的 厚度 限制 。 本 书 提供 了 三 大 类 线 上 微 资 源 ， 通 过 手机 
扫 人 码 ， 读 者 可 随时 观看 讲解 视频 ， 拓 展 阅 读 相 关 知 识 ， 在 线 练 习 强 化 提升 ， 全 程 便捷 、 高 效 ， 感 党 不 一 样 
的 学 习 体验 。 


4， 精 彩 栏目 ， 易 错 点 、 重 点 、 难 点 贴心 提醒 


本 书 根据 初学 者 特点 ， 在 一 些 易 错 点 、 重 点 、 难 点 位 置 精心 设置 了 “注意 ”“ 提 示 ” 等 小 栏目 。 通 过 这 
些小 栏目 ， 读 者 会 更 留心 相关 的 知识 点 和 概念 ， 绕 过 陷阱 ， 掌 握 很 多 应 用 技巧 。 


本 书 配套 资源 


237 节 同 步 微 视频 
20 项 拓展 微 阅读 
344 个 实例 案例 分 析 
: / 124 个 在 线 微 练习 pe | 
详尽 的 配 书 资源 201 项 源 代码 资源 快速 掌握 前 端 开 发 精 著 


PSD 网 页 分 层 模板 (426 套 ) 

设计 素材 大 全 (17 类，10000 个 ) 

网 页 配色 工具 箱 ( 600 个 ) 

网 页 模板 大 全 (632 套 ) 

JavaScript 网 页 特效 大 全 (24 套 ) 

Bootstrap 网 页 模板 ( 500 套 ) 拿 来 就 用 ， 提 升 速度 
Photoshop 设计 大 全 (18 类 ，2000 个) 

历史 经 典 网 页 欣 演 (508 例 ) 


网 页 设计 初级 示例 大 全 (49 例 ) 
网 页 应 用 分 类 案例 大 全 (1600 例 ) 


HTML5+CSS3+JavaScript 实用 生 例 大 全 一 一 一 一 一 
(3200 例 ) 专项 专 练 ， 甘 经 百 战 


PHP、MySQL 参考 手册 (S 册 ) 

9 本 CSS 参考 手册 

10 本 HTML 参考 手册 拓宽 眼界 ,提升 内 功 
23 本 JavaScript 参考 手册 

1 本 Photoshop 学 习 手 册 


HTML、CSS 面试 题 (351 题 ) - 
JavaScript 面试 题 (68$ 题 ) 打造 超 强 就 业 能 力 
前 端 开 发 /设计 面试 经 验 


。V|。 


读者 对 象 


回 名望 系统 学 习 网 页 设计 制作 和 网 站 建设 的 初学 者 。 
四 jQuery 初学 者 和 进 阶 者 。 

四 Web 前端 开 发 和 后 台 设 计 人 员 。 

加 大 、 中 专 院 校 ， 以 及 相关 培训 机 构 的 教师 和 学 生 。 


读 朋 须知 


本 书 从 初学 者 的 角度 出 发 ， 通 过 大 量 的 案例 使 学 习 不 再 枯燥 、 教 条 。 因 此 ， 要 求 读 者 边 学 习 边 实践 操 
作 ， 避 免 学 习 的 知识 流 于 表面 、 限 于 理论 。 

本 书 代码 都 以 灰色 背景 进行 显示 ， 以 方便 读者 阅读 。 考 虑 到 版 面 限制 ， 部 分 展示 出 来 的 代码 仅 包 含 
JavaScript 脚本 和 必要 的 结构 代码 。 读 者 在 学 习 测 试 时 ， 应 该 把 这 些 输入 网 页 。 

在 默认 情况 下 ， 使 用 jQuery 的 别名 $ 来 表示 jQuery 的 名 字 空 间 ， 同 时 直接 把 调用 的 吨 数 放 在 $0 函数 中 。 
$0 函数 实际 上 是 $("'document").ready0 方法 的 简写 ， 它 相当 于 JavaScript 中 的 window.onload=function: 0 人 
事件 处 理 函 数 。 

由 于 jQuery 与 JavaScript 变量 之 间 存 在 区 别 ， 默 认 情 况 下 当 定 义 jQuery 对 象 变量 时 ， 在 变量 的 前 面 附 
加 一 个 $ 前 级 ， 以 便 与 JavaScript 变量 进行 区 分 。 


读者 服务 


学 习 本 书 时 ， 请 先 扫描 封底 的 权限 二 维 码 ( 需要 刊 开 涂 层 ) 获取 学 习 权 限 ， 然 后 即 可 免费 学 习 书 中 的 
所 有 线 上 线 下 资源 。 

本 书 所 附 赠 的 超 值 资源 库 内 容 ， 读 者 可 登录 清华 大 学 出 版 社 网 站 ( www.tup.com.cn )， 在 对 应 图 书页 面 
下 获取 其 下 载 方 式 。 也 可 扫描 图 书 封底 的 “ 文 果 云 盘 ”二 维 码 ， 获 取 其 下 载 方式 。 

本 书 提 供 QQ 和 群 4668118468、697651657 )、 微 信 公 众 号 (qianduankaifa cn )、 服 务 网 站 (www. 
qianduankaifa.cn ) 等 互动 渠道 ， 提 供 在 线 技术 交流 、 学 习 管 疑 、 技 术 资 讯 、 视 频 课 党 、 在 线 勘 误 等 功能 。 
在 这 里 ， 您 可 以 结识 大 量 志同道合 的 朋友 ， 在 交流 和 切磋 中 不 断 成 长 。 

读者 对 本 书 有 什么 好 的 意见 和 建议 ， 也 可 以 通过 邮箱 ( qianduanjiaoshi@163.com ) 发 邮件 给 我 们 。 


天 于 作者 


前 端 科技 是 由 一 群 在 校 教 师 和 一 线 开 发 人 员 组 成 的 团队 ， 主 要 从 事 Web 开发 、 教 学 和 培训 ， 所 编写 的 
图 书 在 网 店 及 实体 店 的 销量 名 列 前 芒 ， 受 到 了 广大 读者 的 好 评 ， 让 数 十 万 的 读者 轻松 跨 进 了 Web 开发 的 大 
门 ， 为 IT 技术 的 普及 和 应 用 做 出 了 积极 贡献 。 由 于 水 平 有 限 ， 书 中 下 漏 和 不 足 之 处 在 所 难免 ， 欢 迎 各 位 读 
者 朋友 批评 、 指 正 。 


编 者 
2019 年 4 月 
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初 识 jQuery 


(名 (视频 讲解 : 9 分 钟 ) 


]Query 是 一 个 轻 量 级 的 JavaScript 代码 库 ， 是 目前 流行 的 JavaScript 框架 之 一 。 
]Query 的 设计 宗旨 是 “Wilte less, do more" ， 即 倡导 写 更 少 的 代码 ， 做 更 多 的 事情 。 本 章 
简单 介绍 ]JQuery 基础 知识 和 概念 ， 帮 助 用 户 事 担 如 何 正 确 使 用 jQuery。 


【学 习 重 点 】 

I 了 解 ]Query。 

| 正确 安装 ]Query。 

| 正确 使 用 ]Query。 

Pp 区 分 jQuery 和 JavaScript 基本 用 法 。 


zy 以 入 门 到 精通 ( 币 课 精 编 县) 


1.1 jQuery 概述 


jQuery 诞生 于 2006 年 ， 由 John Resig 开发 ， 如 图 1.1 所 示 。 到 现在 ，jQuery 经 历 了 10 多 年 的 时 间 洗 涤 ， 
”成 为 全 球 最 受 欢迎 的 JavaScript 框架 。 目 前 ,微软 的 Visual Studio 2008+ 和 Adobe 的 Dreamweaver CS 5.5+ 
”都 完全 包含 了 jQuery 框架 ， 并 实现 核心 支持 和 扩展 。 


| 1.1.1 


图 1.1 jQuery 框架 的 作者 John Resig 


jQuery 功能 


jQuery 封 奈 了 常用 的 JavaScript 代码 ， 提 供 一 种 简便 的 JavaScript 设计 模式 ， 优 化 HTML 文档 操作 、 事 


。 件 处 理 、 


CSS 设计 和 Ajax 交互 。 可 以 说 ，jQuery 改变 了 用 户 编写 JavaScript 代 人 码 的 方式 。 


| 由 于 jQuery 最 早 支 持 CSS 3 选择 占 ， 兼 容 所 有 主流 浏览 般 ， 如 正 6.0+、Firefox 1.5+、Safari 2.0+、 


Opera 9.0+ 等 ， 因 此 它 被 越 来 越 多 的 开发 人 员 喜 爱 和 选用 。 
jQuery 功能 很 强大 ， 它 能 够 帮助 用 户 方 便 、 快 速 地 完成 以 下 任务 。 


加 ”精确 选择 页 面 对 象 。jQuery 提供 了 可 靠 而 襄 有 效率 的 选择 闫 ， 只 需要 一 个 CSS 选择 天 字符 串 ， 即 


四 


可 准确 获取 需要 检查 或 操纵 的 文档 元 素 。 
可 靠 的 CSS 样式 控制 。 使 用 JavaScript 控制 CSS 受 限 于 浏览 融 的 兼容 性 ， 而 jQuery 可 以 弥补 这 一 


不 足 ， 它 提供 了 跨 浏览 带 的 标准 解决 方案 。 


加 ”DOM 操作 规范 化 。jQuery 可 以 使 用 少量 的 代码 完成 复杂 的 DOM 操作 ， 对 HIML 文档 的 整个 结构 


MI 


都 能 重 写 或 者 扩展 。 使 用 起 来 远 比 JavaScript 直接 控制 便捷 。 
标准 化 事件 控制 。jQuery 提供 了 丰富 的 页 面 事 件 ， 这 些 事 件 使 用 简单 、 易 用 、 易 记 ， 不 需要 考虑 
浏览 器 兼容 性 问题 ， 但 是 如 果 使 用 JavaScript 直接 控制 用 户 行为 ， 需 要 考虑 的 问题 就 很 多 ， 既 要 考 


虑 HTML 文档 结构 与 事件 处 理 图 数 的 合成 ， 还 要 考虑 浏览 硕 不 一 致 性 。 


I). 


第 ] 章 初 积 jQuery 


加 ”支持 网 页 特效 。jQuery 内 置 了 一 批 淡 入 、 擦 除 、 移 动 之 类 的 效果 ， 以 及 制作 新 效果 的 工具 包 ， 用 
户 只 需要 简单 地 调用 动画 消 数 ， 就 可 以 快速 设计 出 高 级 动画 效果 。 如 果 直 接 使 用 JavaScript 实现 ， 
不 仅 要 考虑 CSS 动态 控制 ， 还 要 考虑 浏览 带 解 析 差 异 ， 模 拟 的 动画 效果 或 许 很 生硬 ,或 许 很 粗 
糙 等 。 

回 ”快速 通信 。jQuery 对 Ajax 技术 的 支持 很 续 密 ， 它 通过 消除 这 一 过 程 中 的 浏览 右 特 定 的 复杂 性 ， 使 
用 户 得 以 专注 于 服务 器 端的 功能 设计 。 

回 扩展 JavaScript 内 核 。jQuery 提供 了 对 JavaScript 核心 功能 的 扩展 ， 如 迭代 和 数组 操作 等 ， 增 加 对 
客户 端 、 数 据 存 储 、JavaScript 扩展 的 支持 。 


1.1.2 jQuery 特性 


近年 来 ， 互 联网 对 用 户 体验 的 重视 催生 了 客户 端 开发 的 热潮 ， 由 此 也 产生 了 大 量 的 JavaScript 框架 。 这 
些 框架 有 的 专注 于 1.1.1 节 任 务 中 的 一 项 或 两 项 ， 有 的 则 试图 以 预 打包 的 形式 者 括 各 种 可 能 的 行为 和 动态 
效果 。 

与 其 他 优秀 框架 相 比 ，jQuery 在 以 下 几 个 方面 更 胜 一 筹 。 

加 ” 沿 认 CSS 选择 符 用 法 ， 简 化 选择 操作 。 通 过 将 查找 页 面 元 素 的 机 制 构 建 于 CSS 选择 符 之 上 ， 

jQuery 继承 了 简明 清晰 地 表达 文档 结构 的 方式 。 由 于 大 部 分 用 户 对 于 CSS 语法 比较 熟悉 ， 因 而 使 
用 jQuery 就 更 容易 上 手 。 

町 无 限制 扩展 。 再 强大 的 JavaScript 特效 库 也 无 法 满足 用 户 的 个 性 化 需求 ，jQuery 通过 提供 简单 、 统 
一 的 扩展 接口 子 以 解决 众 口 难 调 的 问题 。 创 建新 插件 的 方法 很 简单 ， 而 且 拥 有 完备 的 文档 说 明 ， 
这 促进 了 大 量 有 创意 和 有 实用 价值 的 模块 的 开发 ， 甚 至 在 下 载 的 基本 jQuery 库 文 件 中 ， 多 数 特 性 
在 内 部 都 是 通过 插件 架构 实现 的 。 如 有 必要 ， 可 以 移 除 这 些 内 部 插件 ， 从 而 生成 更 小 的 库 文件 。 

加 ”兼容 浏览 占 。Web 开发 领域 中 一 个 令 人 遗憾 的 事实 是 ， 每 种 浏 览 器 对 颁布 的 标准 都 有 上 自己 的 一 套 
不 一 致 的 实现 方案 。 任 何 Web 应 用 程序 中 都 会 包含 一 个 用 于 处 理 这 些 平台 间 特 性 差异 的 重要 组 成 
部 分 。jQuery 添加 一 个 抽象 层 来 标准 化 常见 的 任务 ， 从 而 有 效 地 减少 了 代码 量 ， 同 时 也 极 大 地 简 
化 了 这 些 任务 。 

加 集合 化 操作 。jQuery 选择 DOM 元 素 之 后 ， 会 自动 封装 成 一 个 集合 对 象 ( 也 称 为 伪 数 组 )， 调 用 
jQuery 方法 可 以 直接 对 这 些 集合 元 素 进 行 操作 ， 而 不 需要 循环 遍历 每 个 返回 的 元 素 。 相 反 ，.hide0) 
之 类 的 方法 被 设计 成 自动 操作 对 象 集合 ， 而 不 是 单独 的 对 象 。 这 种 称 作 隐 式 和 迭代 的 技术 ， 使 得 大 
量 的 循环 结构 变 得 不 再 必要 ， 从 而 大 幅 地 减少 代码 量 。 

加” 优化 代码 书写 ， 提 高 开发 效率 。 借 助 链 式 语法 ，jQuery 将 多 重 操 作 集 于 一 行 。 为 了 避免 过 度 使 用 
临时 变量 或 不 必要 的 代码 重复 ，jQuery 在 其 多 数 方法 中 采用 了 链 式 编程 模式 。 这 种 模式 意味 着 基 
于 一 个 对 象 进行 的 大 多 数 操作 的 结果 ， 都 会 返回 这 个 对 象 自身 ， 以 便于 为 该 对 象 应 用 下 一 次 操作 。 

jQuery 小 巧 、 便 捷 ， 学 习 门 槛 比较 低 ， 也 为 使 用 这 个 库 的 自 定 义 代 码 保 持 简洁 提供 了 技术 保障 。 


1.1.3 jQuery 优势 
与 其 他 JavaScript 框架 相 比 ，jQuery 具有 以 下 几 个 优势 。 


回 ”体积 小 ， 使 用 灵巧 。 
加 ”丰富 的 DOM 选择 器 (CSS 1 一 CSS3、XPath )。 


3. 


Js 俯 入 门 到 精通 ( 币 课 精 编 县 ) 


跨 浏 览 占 ( 正 、Firefox、Safari、Opera )。 
链 式 代码 。 

强大 的 事件 、 样 式 支 持 。 

强大 的 Ajax 功能 。 

易于 扩展 ,插件 丰富 。 


生父 多 多 的 


1.1.4 ”jQuery 版 本 


目前 ，jQuery 有 三 个 大 版 本 。 
回 1.x: 兼容 正 6、 正 7、 下 8， 使 用 广泛 ， 官 方 只 做 bug 维护 ， 功 能 不 再 新 增 。 因 此 ， 对 于 一 般 项 目 
来 说 ， 使 用 1.x 版 本 就 可 以 了 。 最 终 版 本 是 1.12.4， 发 布 于 2016 年 5 月 20 日 。 
回 ”2.x: 不 再 兼容 正 6、 正 7、 正 8， 很 少 有 人 使 用 ， 官 方 只 做 bug 维护 ， 功 能 不 再 新 增 。 如 果 不 考 虑 
兼容 低 版 本 的 训 览 器 ， 可 以 使 用 2.x。 最 终 版 本 是 2.2.4， 发 布 于 2016 年 5 月 20 日 。 
回 3x: 不 兼容 正 6、IE 7、IE 8， 只 支持 最 新 的 浏览 器 。 除 非特 殊 要 求 ， 一 般 不 会 使 用 3.x， 很 多 旧 
的 jQuery 插件 不 支持 这 个 版 本 。 目 前 该 版 本 是 官方 主要 更 新 维护 的 版 本 。 最 新 版 本 是 3.3.1， 发 布 
于 2018 年 1 月 30 日 。 
jQuery 的 1x、2.x 和 3.x 版 本 都 具有 相同 的 公开 API， 然 而 它们 的 内 部 实现 是 不 同 的 。 选 用 版 本 的 一 般 
原则 是 越 新 越 好 ，jQuery 版 本 是 在 不 断 进 步 和 发 展 的 ， 最 新 版 代表 了 当时 最 高 的 技术 水 平 ， 也 体现 了 最 先 
进 的 技术 理念 。 


< 所 注意 : 在 1x 版 本 下 ， 细 分 版 本 比较 多 ， 各 个 版 本 的 函数 略 有 差异 ,使 用 时 应 该 注意 区 分 。 维 护 下 6、 
IE 7、IE 8 是 一 件 很 头疼 的 事情 ， 一般 可 以 额外 加 载 一 个 CSS 和 JavaScript 兼容 文件 单独 处 理 。 
不 过 ， 现 在 使 用 这 些 浏览 器 的 用 户 也 逐步 减少 ， 电 脑 端 用 户 已 经 逐步 被 移动 端 用 户 取代 ， 如 果 
没有 特殊 要 求 ， 一 般 都 会 选择 放弃 对 IE6、IE7、 了 下 8 的 支持 。 
jQuery 3.0 版 本 兼容 更 广泛 的 移动 设备 浏览 器 ， 提 供 更 优化 的 代码 ， 但 是 与 jQuery UI 和 
jQuery Mobile 还 存在 兼容 性 问题 。 如 果 需 要 支持 IE 6、IE 7、IE 8 浏览 器 ， 或 者 兼容 已 经 开发 
的 项 目 ， 建 议 可 以 继续 使 用 1.12 版 本 。 


六 提示 : jQuery 3.3.1 已 经 发 布 ， 开 发 团队 正在 准备 4.0 版 本 。jQuery 4.0 版 本 重点 已 经 开始 倾向 于 移 除 
一 些 特性 ， 不 再 打算 添加 新 的 内 容 。 尽 管 jQuery 3.3.1 还 是 添加 了 新 特性 ， 如 添加 .addClassO)、 
TemoveClass0O 和 .toggleClassO 使 其 能 够 接受 类 数组 ， 但 仍 要 移 除 一 些 特 性 ,为 jQuery 4.0 做 准 
备 。 有 一 些 方法 已 经 被 移 除 ， 如 .now、.isWindow 和 .camelCase。 


1.2 使 用 jQuery 


jQuery 项 目 主 要 包括 jQuery Core ( 核心 库 )、jQuery UI ( 界面 库 )、Sizzle (CSS 选择 需 )、jQueryMobile 
(jQuery 移动 版 ) 和 QUnit ( 测试 套件 ) 五 个 部 分 ， 参 考 网 址 如 表 1.1 所 示 。 
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表 1.1 jQuery 参考 网 址 


类 型 网 址 
jQuery 框架 官网 http://jquery.comy 
jQuery 项 目 组 官网 https://jquery.org/ 
jQuery UI 项目 主页 http://jqueryui.conmy 
jQueryMobile 项 目 主页 http://jquerymobile.conmy 
Sizzle 选择 侣 引擎 官网 http://sizzlejs.com/ 
QUnit 官网 http://qunitjs.com/ 

John Resign ( jQuery 原创 作者 ) 个 人 网 站 http://ejohn.oreg;/ 


1.2.1 下 载 jQuery 


访问 jQuery 官方 网 站 ( http://jquery.com/ )， 下 载 最 新 版 本 的 jQuery 库 文 件 ， 在 网 站 首页 单 击 “Download 
jQuery v3.3.1” 图 标 ， 进 入 下 载 页 面 ， 如 图 1.2 所 示 。 目 前 最 新 版 本 是 3.3.1， 本 书 主 要 根据 3.1.1 版 本 进行 
讲解 
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图 1.2 下 载 jQuery 最 新 版 本 


在 下 载 页 面 ， 如 果 选 择 “Download the compressed, production jQuery 3.3.1” 选 项 ， 则 可 以 下 载 代 码 压 缩 
版 本 ， 此 时 jQuery 框架 源 代 但 被 压缩 到 8SKB ， 下 载 的 文件 为 We 总 1 min js。 

如 果 选 择 “Download the uncompressed, development jQuery 3.3.1” ， 则 可 以 下 载 包 含 注 释 的 未 被 压 
缩 的 版 本 ， 大 小 为 266KB， 下 载 的 文件 为 jquery-3.3.1.js。 

也 可 以 访问 下 面 网 址 进行 下 载 。 

MM https://aithub.com/Jquery/Jquery 

加 https://code.Jquery.com/ 


密 提示 : jQuery 全 部 版 本 下 载 网 址 ; http://code.jquery.com/jquery/。 


1 从 入 门 到 精通 ( 柚 课 精 编 版 ) 


12.2 安 疾 jQuery 


jQuery 库 不 需要 复杂 的 安装 ， 只 需要 把 下 载 的 库 文件 放 到 站 点 中 ， 然 后 导 人 页 面 中 即 可 。 
【示例 】 导 入 jQuery 库 文 件 可 以 使 用 相对 路 径 ， 也 可 以 使 用 绝对 路 径 ， 有 具体 情况 根据 存放 jQuery 库 文 


件 的 位 置 而 定 
| <ldoctype html> 


<html> 
<head> 
<meta charset—"utf-8"> 
<script src="]Jquery/Jquery-3.1.1.]s" type="text/Javascript"></script> 
<script type="text/Javascript"> 
// 在 这 里 用 户 就 可 以 使 用 jQuery 编程 了 ! ! 
</script> 
<title></title> 
</head> 
<body> 
</body> 
</html> 


六 提示 : 除了 使 用 上 述 方法 将 jQuery 库 导 入 页 面 中 ， 还 可 以 使 用 jQuery 在 线 提供 的 库 文 件 ， 在 大 多 数 

环境 下 ， 推荐 使 用 在 线 提供 的 jQuery 代码 ， 因 为 使 用 在 线 存储 的 jQuery 更 加 稳定 、 高 速 。 

<script type="text/Javascript" src="https://code.Jquery.comy/]query-3.2.1.mm.]s"></script> 

或 者 使 用 Google 提供 的 API 进行 导入 : 

<script type="text/Javascript" src="http://Www.2oogle.com/]sap1"></script> 

<script type="text/Javascript"> 

google.load("]Jquery","3.2.1",{uncompressed:true} ); 

</script> 

google.load0 函数 包含 3 个 参数 ， 第 一 个 参数 为 JS 库 的 名 称 ， 如 jquery、extjs 等; 第 二 个 
参数 为 该 库 的 版 本 号 ， 如 3.2.1; 第 三 个 参数 设 定 是 否 使 用 压缩 版 本 的 库 文 件 ， 使 用 未 压缩 版 本 
格式 为 {uncompressed:true} ; 前 两 个 参数 必 选 ， 第 三 个 参数 为 可 选 参 数 。 


< 负 注意 : Google Ajax Libraries API 是 Google 的 一 个 项 目 ， 它 提供 当前 流行 的 各 种 JavaScript 库 的 快速 引 
用 方式 ， 并 承诺 永久 可 用 。 但 是 ， 考 虑 到 国内 禁用 Google 大 部 分 服务 ， 目 前 在 国内 还 无 法 正 
常 使 用 。 


1.2.3 ”测试 jQuery 
”引入 jQuery 库 文件 之 后 ， 就 可 以 在 页 面 中 进行 jQuery 开发 了 。 开 发 的 步 又 很 简单 ， 在 导入 jQuery 库 


文件 的 <scrip 全 标签 行 下 面 重新 使 用 <script 标签 定义 一 个 JavaScript 代码 段 ， 然 后 就 可 以 在 <script> 标签 
内 调用 jQuery 方法 ， 编 写 JavaScript 脚本 。 


第 | 章 初 积 JQuery QS 


【示例 】 在 页 面 初始 化 完毕 后 ， 调 用 JavaScript 的 alert0 方法 与 浏览 者 打 个 招呼 。 


<!doctype html> 
<html> 
<head> 
<meta charset—"utf-8"> 
<script src="Jquery/Jquery-3.1.1.1s" type="text/Javascript"></script> 
<script type="text/Javascript"> 
$(function(O{ 
alert("Hi 您 好 1"): 


<title></title> 
</head> 
<body> 
</body=> 
</html> 


在 浏览 需 中 预览 ， 可 以 看 到 在 当前 窗口 中 会 弹出 一 个 提示 对 话 框 ， 如 图 1.3 所 示 。 


送 
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图 1.3 测试 jQuery 代码 


在 jQuery 代码 中 ，$ 是 jQuery 的 别名 ， 如 $0 等 效 于 jQuery0。jQuery0 函数 是 jQuery 库 文件 的 接口 函 
数 ， 所 有 jQuery 操作 都 必须 从 该 接口 函数 切 和 人 。jQuery0 函数 相当 于 页 面 初始 化 事件 处 理 男 数 ， 当 页 面 加 
载 完 毕 ， 会 执行 jQuery0 函数 包含 的 函数 ， 所 以 在 浏览 该 页 面 时 会 执行 “alert("'Hi, 您 好 1");” 人 代码 ， 看 到 弹 
出 的 信息 提示 对 话 框 。 | 


< 胃 注意 : 如 果 使 用 jQuery 操作 DOM 文档 ， 则 必须 确保 在 DOM 载 入 完毕 后 开始 执行 ， 应 该 使 用 ready | 
事件 作为 处 理 HTML 文档 的 开始 。 | 
$(document).ready(function() { | 
//JavaSscript 或 者 jQuery 代码 
}); | 
上 面 代 码 的 语义 是 ， 匹 配 文档 中 的 document 节点， 然后 为 该 节点 绑 定 ready 事件 处 理 函 数 。 | 
它 类 似 于 JavaScript 的 window.onload 事件 处 理 函 数 ， 不 过 jQuery 的 ready 事件 要 先 于 onload | 
事件 被 激活 。 | 
window.onload = function(){ 


//JavaScript 或 者 jQuery 代码 
让 
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为 了 方便 开发 ，jQuery 框架 进一步 简化 了 $(document).ready0 方法 的 写法 ， 直 接 使 用 $() 方 
法 来 表示 。 

$( functionO { 

//JavaScript 或 者 jQuery 代码 

}); 

考虑 到 页 面 加 载 需要 一 个 过 程 ， 所 有 jQuery 代码 建议 都 包含 在 $0 函数 中 ， 当 然 也 可 以 不 
被 包含 在 $0 函数 中 ， 这 与 JavaScript 代码 应 该 放 在 Window.onload 事件 处 理 函 数 中 的 道理 是 一 
样 的 。 


1.3 学 习 资 源 
下 面 为 读者 推荐 一 些 学 习 jQuery 的 相关 资源 ， 使 用 这 些 资 源 可 以 帮助 读者 找到 精通 jQuery 的 捷径 。 
1.3.1 jQuery 开发 工具 


使 用 任何 文本 编辑 带 部 可 以 开发 jQuery 程序 ， 当 然 ， 使 用 集成 的 开发 环境 能 够 提高 编 但 效率 。 第 用 
Web 开发 工具 包括 Dreamweaver、Visual Studio Code、Sublime、WebStorm、Atom、Aptana Studio 等 。 其 
”中 Dreamweaver 是 针对 网 页 设计 师 提供 的 专业 可 视 化 设计 工具 ， 从 Dreamweaver CS 5.5 版 本 开始 ， 内 置 了 
”jQuery 引擎 ， 实现 内 核 支 持 ， 并 提供 各 种 jQuery 应 用 插件 。Visual Studio Code 是 Visual Studio 的 在 线 、 开 
。 放 版 ， 该 工具 功能 完善 ， 提 供 强大 的 扩展 支持 ， 是 Web 开发 最 好 用 的 工具 之 一 。 

以 上 工具 读者 都 可 以 在 网 上 搜索 下 载 ， 这 里 不 再 提供 下 载 链接 。 


1.3.2 jQuery 参考 手册 


学 习 jQuery， 配 备 参 考 手 册 是 必需 的 。 下 面 列 举 一 些 和 常用 的 在 线 参考 手册 。 
回 jQuery API 官方 参考 手册 : https://apijquery.com/。 
加 ”W3School 的 jQuery 参考 手册 : http://www.w3school.com.cn/jquery/jquery Teference.asp。 
回 ”网 友 提 供 的 参考 手册 ， 经 过 加 工 更 适合 初学 者 参考 ， 谈 者 也 可 以 下 载 到 本 地 离线 参考 。 
> http://Jquery.cuishiteng.cmy/ 
> http://wWWwWWw.css88.conVJqapl-1.9/ 
> http://Jquery.cuishifeng.cn/source.html 


解析 jQuery 框架 


( 车 4 视频 讲解 : 1 小 时 19 分 钟 ) 


jQuery 剑 走 偏锋 ， 抛 齐 了 传统 JavaScript 框架 中 一 些 中 看 不 中 用 的 内 容 ， 为 开发 者 
提供 了 一 个 优雅 、 小 巧 、 精 悍 的 类 库 ， 极 大 地 提高 了 Web 开发 的 效率 。jQuery 源码 将 
近 有 一 万 行 ， 远 辑 复 杂 、 结 构 罗 涩 ， 本 章 将 从 JavaScript 实现 的 基本 方法 开始 起 步 ， 详 
解 jQuery 框架 的 设计 思路 ， 以 及 框架 模型 的 实现 过 程 。 


【学 习 重 点 】 

pl 了 人 解 ]Query 源码 的 设计 思路 。 
| 熟悉 ]Query 框架 模型 构建 过 程 。 
| 认识 jQuery 对 象 的 本 质 。 
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2.1] 设计 思路 


jQuery 一 词 可 以 分 解 为 ]+ query, ] 是 JavaScript 的 首 字 母 小 写 ，query 一 词 表 示 查 询 的 意思 。 也 就 是 说 ， 
| jQuery 实际 上 就 是 JavaScriptt+Query 的 语义 合成 ， 直 接 理解 就 是 JavaScript 查询 。 
正如 其 名 称 一 样 ，jQuery 的 核心 功能 就 是 JavaScript 查询 ， 它 包含 两 个 层面 的 语 境 : 选择 DOM 元 素 ， 
”并 对 选择 的 对 象 进行 操作 。 
| 概括 来 说 ，jQuery 框架 主要 实现 了 两 个 目标 : 选择 和 操作 。 为 此 ，jQuery 重点 解决 了 下 面 4 个 命题 。 
| 回 选择 什么 ? 


| 加 怎么 操作 ? 
| 在 jQuery 出 现 之 前 ，Prototype、YUI 等 已 经 是 很 成 熟 的 JavaScript 框架 ， 且 各 有 优点 ， 市 场 占 有 率 比 
较 高 。 为 什么 jQuery 后 来 者 居 上 ， 所 向 披 靡 ? 它 有 什么 优秀 的 特质 吸引 专业 的 开发 人 员 放 弃 已 经 熟悉 的 
JavaScript 框架 ， 转 身 选 用 jQuery ? 
回答 上 述 问题 ， 需 要 先 明白 jQuery 的 设计 思路 。 简 单 梳理 一 下 ， 用 户 在 Web 开发 中 主要 做 了 什么 ? 
使 用 getElementById0 、getFlementsByTagName() 、querySelectorO0 和 querySelectorAllO 等 原生 方法 
在 DOM 文档 中 找到 目标 元 素 。 
使 用 innerHTML 、text 等 DOM 属性 谈 写 值 。 
监听 DOM 事件， 如 click 等 。 
通过 改变 DOM 元 素 的 CSS 样式 ， 设 计 各 种 动态 视觉 效果 。 
通过 Ajax 技术 ， 实 现 与 服务 器 交换 数据 ， 并 在 指定 DOM 元 素 中 显示 。 

当然 ，jQuery 提供 的 功能 远 不 止 于 此 。 

在 对 DOM 元 素 进行 操作 时 ， 这 个 DOM 元 素 可 能 是 单个 元 素 ， 也 可 能 是 一 个 集合 。 操 作 的 过 程 可 以 分 
解 为 以 下 两 步 。 
| 查找 DOM 元 素 。 

操作 DOM 元 素 。 

用 户 通 过 JavaScript 的 原生 方法 可 以 查找 DOM 元 素 ， 也 可 以 直接 操作 ,但 是 考虑 到 浏览 器 的 兼容 性 ， 

以 及 代码 的 重用 性 ， 选 用 各 种 JavaScript 类 库 就 比 使 用 原生 方法 方便 、 高 效 。 
| JavaScript 类 库 只 要 使 用 恰当 ,不 一 定 比 直接 采用 JavaScript 原生 方法 的 运行 效率 低 ， 但 是 却 能 极 大 地 
提高 开发 效率 。 
| 自从 Prototype 采用 $ 作为 document.getElementById 的 缩写 ，$ 符号 似乎 成 了 查找 元 素 的 专用 符号 。 但 
”是 这 种 简单 的 查找 并 不 能 满足 所 有 Web 开发 的 需求 ， 有 时 候 需要 像 CSS 选择 器 那样 匹配 DOM 元 素 。 
| jQuery 采用 $ 符号 作为 查找 元 素 的 代理 ， 不 再 是 简单 的 getElementById 的 缩写 ， 而 是 功能 强大 的 CSS 
选择 兹 ， 这 也 是 Query 的 本 意 。 

解决 了 查找 的 问题 ， 下 面 就 来 对 匹配 元 素 进 行 操 作 。jQuery 抛弃 了 Prototype 通过 对 Array、Object、 
| Function、Event 等 JavaScript 原型 的 功能 进行 扩展 ， 而 是 把 所 有 的 焦点 汇集 到 如 何 解决 DOM 操作 的 便利 
| jQuery 在 设计 时 遵循 极 简 理念 ， 它 不 仅 简 化 了 JavaScript 原生 方法 的 使 用 难度 ， 同 时 提供 了 人 性 化 、 羔 
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容 性 好 的 功能 ， 如 Ajax、Event、Fx、CSS 等 。 概 括 说 明 如 下 。 
回 ”为 用 户 提 供 了 唯一 入口 : jQuery0 构造 浮 数 ($0 )。 这 样 看 起 来 更 简洁 ， 入 手 快 。 
加 ”为 用 户 提供 统一 的 操作 对 象 : jQuery 对 象 。 这 样 看 起 来 更 标准 ,使 用 快 。 
实际 上 ，jQuery 就 是 一 个 选择 项 。 在 选择 此 的 基础 上 提供 对 匹配 元 素 进 行 操 作 的 功能 。 选 择 顺 是 人 口 ， 
操作 是 目标 。 从 代码 上 进行 分 析 ， 这 种 操作 分 为 以 下 两 种 方式 。 
加 jQuery 工具 师 数 : 通过 jQuery 命名 空间 直接 引用 ， 相 当 于 jQuery 类 型 的 静态 方法 ， 如 jQuery.each0。 
加 ”jQuery 方法: 通过 jQuery 对 象 引 用 ， 如 jQuery0O.eachO0。 实 际 上 这 些 jQuery 方法 大 多 数 是 jQuery 
工具 函数 的 代理 ， 真 正 的 功能 实现 代码 都 包含 在 jQuery 静态 方法 中 。 


2.2 设计 框架 模型 


2.2.1 定义 类 型 


在 JavaScript 中 ， 构 造 国 数 就 是 图 数 ， 不 要 把 它 想 得 很 复 林 。 在 语法 形态 上 ， 构 造 晒 数 与 普通 的 图 数 无 
异 。 一 般 使 用 小 括号 运算 符 来 调用 函数 ， 执 行 一 段 代 码 。 如 果 使 用 new 运算 符 来 调用 函数 ， 那 么 这 个 函数 
就 变 成 构造 函数 了 。 
不 同 于 其 他 的 主流 编程 语言 ，JavaScript 的 构造 曙 数 并 不 是 作为 类 的 一 个 特定 方法 存在 的 ， 当 任意 一 
普通 胃 数 用 于 创建 一 个 类 型 时 ， 它 就 被 称 作 构 造 国 数 ， 也 称 为 构造 项 。 
构造 次数 有 如 下 特点 。 
馈 ” 在 肾 数 内 部 ， 可 以 使 用 this 引用 实例 对 象 。 实 例 对 象 就 是 类 型 实例 化 后 返回 的 对 象 。 因 此 ,借助 
this 可 以 在 构造 次 数 体内 为 实例 对 象 设 置 属性 、 添 加 方法 。 
回 ”构造 旺 数 一 般 不 需要 返回 值 ， 但 允许 使 用 返回 语句 return (不 推荐 )。 如 果 返 回 值 为 非 对 象 类 型 的 
值 ， 则 被 忽略 ; 如 果 返 回 对 象 类 型 的 值 ， 则 将 履 盖 反 实 例 化 对 象 ，this 就 不 再 引用 返回 的 对 象 。 
回 构造 师 数 必须 使 用 new 运算 符 调 用 。 如 果 直 接 使 用 小 括号 运算 符 调 用 ， 这 时 它 就 不 是 构造 困 数 ， 
而 是 普通 的 消 数 。 
在 JavaScript 中 ， 可 以 把 构造 图 数理 解 为 一 个 类 型 ， 虽 然 不 规范 ， 但 是 很 好 用 。 这 个 类 型 是 JavaScript 
面向 对 象 编程 的 基础 。 
定义 一 个 函数 就 相当 于 构建 了 一 个 类 型 ， 然 后 借助 这 个 类 型 来 实例 化 无 数 的 对 和 象 。 
【示例 】 下 面 代码 定义 一 个 jQuery 类 型 ， 类 名 是 jQuery。 
var JQuery = function()1{ 
1/ 图 数 体 
} 
上 面 代码 实际 上 和 定义 了 一 个 空 的 图 数 ， 图 数 体内 没有 包含 任何 代码 ， 可 以 把 它 理解 为 一 个 空 类 型 。 
下 面 代 码 为 jQuery 扩展 原型 。 
var ]QueIy = function|#} 
JQuery.prototype = { 
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/扩展 的 原型 对 象 
} 


党 提示 : 这 里 读者 需要 理解 JavaScript 原型 : 
原型 是 JavaScript 实现 继承 的 基本 机 制 ，JavaScript 为 所 有 函数 定义 了 一 个 原型 属性 一 一 
prototype， 通 过 它 可 以 访问 类 型 的 原型 对 象 。 原 型 对 得 是 一 个 类 型 的 公共 对 象 ， 允 许 该 类 型 的 
所 有 实例 对 象 访问 。 


接着 上 面 的 示例 代码 ， 为 jQuery 的 原型 起 个 别名 一 一 血 。 如 果 直 接 命 名 为 血 ， 则 表示 它 属 于 window 
对 象 ， 这 样 使 用 不 安全 。 更 安全 的 方法 是 为 jQuery 类 型 对 象 定义 一 个 静态 引用 jQuery. 血 ， 然 后 把 jQuery 的 
原型 对 象 传递 给 这 个 属性 Query.f， 实 现代 码 如 下 : 

JQuery.fh = JQuery.prototype = { 

/扩展 的 原型 对 象 

} 

在 这 里 ，jQuery.fn 引用 jQueryprototype， 因 此 要 访问 jQuery 的 原型 对 象 ， 不 仅 可 以 使 用 jQuery 和 句 ， 还 
可 以 直接 使 用 jQuery.prototype。 

下 面 为 jQuery 类 型 也 起 个 别名 一 一 $。 

Var $ = jQuery = functionO 

模仿 jQuery 框架 ,给 jQuery 原型 添加 两 个 成 员 ， 一 个 是 原型 属性 version， 男 一 个 是 原型 方法 size0， 
分 别 定 义 jQuery 框架 的 版 本 号 和 jQuery 对 象 的 长 度 。 


Var $ = jQuery = functionO{} 
JQuery.fh = J]Query.prototype = { 


version: "3.2.1", // 原型 属性 

size: function(O) { // 原型 方法 
return this.leneth: 

} 


} 


2.2.2 返回 jQuery 对 象 


在 2.2.1 节 示 例 基础 上 ， 本 节 讲 解 如 何 调 用 原型 成 员 : version 属性 和 size0 方法 。 
也 许 ， 读 者 可 以 使 用 下 面 的 代 人 码 调 用 。 


Var test = new $0: /实例 化 

alert( test.version ): 1// 读 取 属 性 ， 返 回 "3.2.1" 

alert( test.size() ): 1// 贡 用 方法 ， 人 返回 undefined 
但 是 ，jQuery 并 不 是 这 样 用 的 ， 它 模仿 类 似 下 面 的 方法 进行 调用 。 
$().version: 

$(0.size(: 


也 就 是 说 ,jQuery 没有 使 用 new 运算 符 调用 jQuery 构造 次数 ， 并 实例 化 jQuery 类 型 ; 而 是 使 用 小 括号 
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运算 从 调用 jQuery0 构造 函数 ， 然 后 在 后 面 直接 访问 原型 成 员 。 
如 何 实 现 这 样 的 操作 呢 ? 
【示例 1】 在 jQuery 构造 函数 中 使 用 retum 语句 返回 一 个 jQuery 实例 。 


Var $ = jQuery = function(){ 


return new jQuery(): /返回 类 的 实例 
4 
JQuery.fhn = ]Query.prototype = + 
version: "3.2.1", // 原型 属性 
size: function() { // 原型 方法 
return this.lenegth: 
| 
+ 
执行 下 面 的 代码 ， 会 出 现 如 图 2.1 所 示 的 内 存 溢出 错误 。 
$().version; 
$0).size(); 


ww 
| htp:y/localhost080/mysite ~ 昌吉 ‖ 是 Iocalhost x 硼 高 天 


文件 (F) 查找 [IN】 茜 用 (S} 查看 [V】 图 际 四 组 存 fC) 工具 [验证 办 ) | 
浏览 器 模 二 ,IE10IB] 文档 模 坏 (M): 本 准 二 中 区 


HTML Css EE 脚本 ” 探 埋 器 网络 


图 2.1 提示 内 存 溢 出 错误 


这 说 明 在 构造 函数 内 部 实例 化 对 象 是 允许 的 ， 因 为 这 个 操作 导致 死 循环 引用 。 
【示例 2】 下面 尝试 使 用 工厂 模式 进行 设计 : 在 jQuery0 构造 图 数 中 返回 jQuery 的 原型 引用 。 


Var $ = jQuery = function(){ 


return jQuery.prototype: /返回 类 的 原型 
4 
JQuery.fhn = ]Query.prototype = + 

version: "3.2.1", 1// 原型 属性 

size: function() { / 原型 方法 

retum this.leneth: 

: 
4 
alert($0.version ): // 读 取 属性 ， 返 回 "3.2.1" 
alert($().sizeO ): // 调用 方法 ， 返 回 undefined 


【示例 3】 示例 2 基本 实现 了 $0.size0 这 种 形式 的 用 法 ， 但 是 在 构造 函数 中 直接 返回 原型 对 象 , 设计 思 
路 过 于 狭窄 ， 无 法 实现 框架 内 部 的 管理 和 扩展 。 下 面 模拟 其 他 面向 对 象 语言 的 设计 模式 : 在 类 型 内 部 定义 一 | 
个 初始 化 构造 函数 initD ， 当 类 型 实例 化 后 直接 执行 这 个 函数 ， 然 后 返回 jQuery 的 原型 对 象 。 

var $ = JQuery = function(){ 
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return jQuery.fn.initO): 
} 
JQuery.fh = JQuery.prototype = 4 
Inlt : function(){ 
return this: 


version: "3.2.1", 
size: fnction() { 
return this.leneth: 
} 
} 
alert($().version ): 
alert($().size() ): 


2.2.3 ”设计 作用 域 
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/调用 原型 方法 init0， 模 拟 类 的 初始 化 构造 师 数 


/在 原型 的 初始 化 方法 中 返回 原型 对 象 


1/ 原型 属性 
// 原型 方法 


/ 读 取 属性 ， 返 回 "3.2.1" 
/调用 方法 ， 返 回 undefined 


2.2.2 节 初 步 实现 了 最 原始 的 想法 : 模拟 jQuery 的 用 法 ， 让 jQuery0 返回 jQuery 类 型 的 原型 。 实 现 方法 : 
定义 初始 化 困 数 initO 并 返回 this， 而 this 引用 的 是 jQuery 类 型 的 原型 jQuery.prototype。 

在 使 用 过 程 中 也 会 发 现 一 个 问题 ; 作用 域 混 乱 ， 给 后 期 的 扩展 带 来 隐患 。 下 面 结合 一 个 示例 进行 说 明 。 

【示例 1】 和 定义 jQuery 原型 中 包含 一 个 length 属性 ， 同 时 初始 化 函数 initO 内 部 也 包含 一 个 length 属性 


var $ =]JQuery = function(){ 
retum jQuery.fn.initO: 


} 
JQuery.fhn = JQuery.prototype = { 


Inlt : function() { 
this.leneth = 0: 
this. size = function(){ 
return this.leneth: 
} 
Tetum this: 
人 
length: 1, 


version: "3.2.1", 
slze: function() { 
retum this.leneth: 

} 

} 

alert( $().version ): 

alert( $0. sizeO| ): 

alert( $0.size() ): 


/原型 属性 
/原型 方法 


1// 原型 属性 
// 原型 方法 


1 返回 "3.2.1" 
/退回 0 
/返回 0 


运行 示例 ， 可 以 看 到 ，init0 函数 内 的 this 与 外 面 的 this 均 引 用 同一 个 对 象 : jQuery.prototype 原型 对 象 。 
因此 ， 会 出 现 init0 函数 内 部 的 this.length 覆盖 掉 外 部 的 this.length。 
简单 概括 : 初始 化 困 数 init0 的 内 、 外 作用 域 缺 乏 独 立 性 ， 对 于 jQuery 这 样 的 框架 来 说 ， 很 可 能 造成 消 


极 影 啊 。 
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翻 看 一 下 jQuery 源码， 可 以 看 到 jQuery 框架 通过 下 面 的 方式 调用 initO 销 数 。 
var $ =]JQuery = function( selector, context ){ 

return new jQuery.fn.init(selector, context ): 实例 化 init0 ， 分 隔 作 用 域 
} 


使 用 new 运算 和 从 调用 初始 化 函数 imit0， 创 建 一 个 独立 的 实例 对 象 ， 这 样 就 分 隔 了 initO 函数 内 、 外 的 
作用 域 ， 确 保 内 、 外 this 引用 不 同 。 
【示例 2】 修改 示例 1 中 的 jQueryO0 ， 使 用 retum 返回 新 创建 的 实例 。 


Var $ =]JQuery = fnction(O{ 
retum new jQuery.fn.mit(): 


} 
JQuery.fn = JQuery.prototype = 1 
mit : function(){ 


this.length = 0: /本 地 属性 
this. size = functionO{ // 本 地 方法 
retum this.length:; 
} 
return this: 
全 
length: 1, 
version: "3.2.1", // 原型 属性 
size: function() { // 原型 方法 
return this.leneth: 
} 
EL 
alert( $0.version ): /返回 undefined 
alert( $0. size() ): /返回 0 
alert( $0.size() ): / 抛 出 异常 


运行 示例 2， 由 于 作用 域 被 阻 断 ， 导 致 无 法 访问 jQuery. 旬 对 象 的 属性 或 方法 。 


2.2.4 ” 跨 域 访问 


下 面 来 探索 如 何 越 过 作用 域 的 限制 ， 实 现 跨 域 访问 外 部 的 jQueryprototype。 | 
分 析 jQuery 框架 源码 ， 发 现 它 是 通过 原型 传递 解决 这 个 问题 。 实 现 方 法 : 把 jQuery 和 传递 给 jQuery 
fn.init.prototype， 用 jQuery 的 原型 对 象 覆 关 掉 init 的 原型 对 象 ， 从 而 实现 跨 域 访问 。 
【示例 】 下 面 代码 具体 演示 了 跨 域 访问 的 过 程 。 
var $ =]JQuery = function(){ 
retum new jQuery.fn.mit(); 
} 


JQuery.fh = ]Query.prototype = 1 
Inlt : function(){ 


this.length = 0: /本 地 属性 

this. size = functionO{ // 本 地 方法 
return this.leneth: 

} 
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new jQuery fninitO 用 来 创建 一 个 新 的 实例 对 象 ， 它 拥有 init 类 型 的 prototype 原型 对 象 。 通 过 改变 
prototype 指针 ， 使 其 指 回 jQuery 类 的 prototype， 这 样 新 实例 实际 上 就 继承 了 jQuery. 血 原型 对 象 的 成 员 。 


”2.2.5 设计 选择 器 


3 
length: 1, 
version: "3.2.1", 1 原型 属性 
size: function() { // 原型 方法 
return this.leneth: 
| } 
| } 
| jQuery.fh.init.prototype = jQuery.fh: /使 用 jQuery 的 原型 对 象 蓝 盖 init 的 原型 对 和 象 
| alert( $(.version ): /返回 "3.2.1" 
| alert( $0. sizeO ): /返回 0 
| alert( $0.size() ): /返回 0 


| 前 面 几 节 分 步 讲解 了 jQuery 框架 模型 的 最 外 层 逻 辑 结构 ， 下 面 再 来 探索 jQuery 内 部 的 核心 功能 一 一 选 
择 器 。 
| jQuery 返回 的 是 jQuery 对 象 。 实 际 上 ，jQuery 是 一 个 普通 对 象 ， 拥 有 数组 length， 不 继承 数组 的 原型 
] 方法 。 


| 【示例 】 下 面 示例 尝试 为 jQuery0 函数 传递 一 个 参数 ， 并 让 它 返 回 一 个 jQuery 对 象 。 
| 翻 看 jQuery 源码 ， 可 以 看 到 jQuery0 构造 困 数 包含 两 个 参数 一 一 selector 和 context， 其 中 selector 表示 
选择 顺 ，context 表示 匹配 的 下 上 文 ， 即 可 选择 的 范围 ， 它 表示 一 个 DOM 元 素 。 为 了 简化 操作 ， 本 例假 设 
选择 器 的 类 型 仅 为 标签 选择 般 。 实 现 的 代码 如 下 : 

<script> 


Var $ =]Query = function(selector, context ){ /jQuery 构造 师 数 
return new jQuery.fn.init(selector, context ): //jQuery 实例 对 象 


上 
jQuery.fn = jQuery.prototype = { /jQuery 原型 对 象 
init : function(selector, context){ / 初始 化 构造 困 数 
selector = selector || document /初始 化 选择 些 ， 默 认 信 为 document 
context = context || document ”// 初始 化 上 下 文 对 象 ， 默认 值 为 document 


if( selector.nodeType ) { // 如 果 是 DOM 元 又 
this[0] = selector: /直接 把 该 DOM 元 素 传递 给 实例 对 象 的 伪 数 组 
this length = 1: /设置 实例 对 象 的 length 属性 ， 表 示 包 含 1 个 元 素 
this.context = selector: // 重新 设置 上 下 文 为 DOM 元 素 
return this: /返回 当前 实例 


} 
if( typeof selector 一 一 "strine" ) { // 如 果 是 选择 符 类 型 的 字符 串 
vare=context.getElementsByTagName(selecton:; “获取 指定 名 称 的 元 素 
for(var i= 0:i<elength:itHf ”W 使 用 for 把 所 有 元 素 传 人 当前 实例 数组 中 
this[1| = efil; 
} 
this.length = elength: 1/ 设置 实例 的 length 属性 ， 定 义 包含 元 素 的 个 数 
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this.context = context: / 保存 上 下 文 对 象 
Tetum this: /返回 当前 实例 
} elsef{ 
this.length = 0: /设置 实例 的 length 属性 值 为 0， 表示 不 包含 元 素 
this.context = context: / 保存 上 下 文 对 象 
Tetul this: /返回 当前 实例 
} 
} 
上 
JQuery.fn.mit.prototype = JQuery.fn: 
window.onload = function(){ 
alert( $("div").leneth ): /返回 3 
} 
</script> 
<div></dIiv> 
<div></dIiv> 
<div></dIiv> 


在 上 面 示例 中 ，$("div") 基本 拥有 了 jQuery 框架 中 $("'div") 选择 需 的 功能 ， 使 用 它 可 以 选取 页 面 中 指定 
范围 的 div 元 素 。 同 时 ， 读 取 length 属性 可 以 返回 jQuery 对 象 的 长 度 。 


2.2.6 设计 迭代 器 


2.2.5 节 探 索 了 jQuery 选择 器 的 基本 实现 方法 ， 下 面 讲解 如 何 操作 jQuery 对 象 。 

在 jQuery 框架 中 ，jQuery 对 象 是 一 个 普通 的 JavaScript 对 象 ， 但 是 它 以 索引 数组 的 形式 包含 了 一 组 数 
据 ， 这 组 数据 就 是 使 用 选择 器 匹配 的 所 有 DOM 元 素 。 
操作 jQuery 对 象 ， 实 际 上 就 是 操作 这 些 DOM 元 素 ， 但 是 无 法 直接 使 用 JavaScript 方法 来 操作 jQuery 对 
只 有 逐一 读 取 它 包含 的 每 个 DOM 元 素 才 能 够 实现 各 种 操作 ， 如 插入 、 删 除 、 藤 套 、 赋 值 、 读 写 属 性 等 。 
在 实际 使 用 jQuery 的 过 程 中 ， 可 以 看 到 类 似 下 面 的 jQuery 用 法 。 
$("div").htmlO 


也 就 是 说 ， 可 以 直接 在 jQuery 对 象 上 调用 html0 方法 来 操作 jQuery 包含 的 所 有 DOM 元 素 。 那 么 这 个 
功能 是 怎么 实现 的 呢 ? 

jQuery 定义 了 一 个 工具 函数 eachO， 利 用 这 个 工具 可 以 遍历 jQuery 对 象 中 的 所 有 DOM 元 素 ， 并 把 操 
作 jQuery 对 象 的 行为 封装 到 一 个 回调 函数 中 ， 然 后 通过 在 每 个 DOM 元 素 上 调用 这 个 回调 函数 来 实现 逐一 
操作 每 个 DOM 元 素 。 


已 


var$=jQuery = function(selector, context ){ /jQuery 构造 因数 
Tetum new jQuery.fn.init(selector, context ): /jQuery 实例 对 象 
jQuery 血 =jQueryprototype = { /jQuery 原型 对 象 


init : function(selector, context) // 初始 化 构造 函数 
selector = selector || document // 初始 化 选择 器 ， 默 认 值 为 document 
context = context || document: /初始 化 上 下 文 对 象 ， 默 认 值 为 document 
if ( selector.nodeType ) { // 如 果 是 DOM 元 素 


r 
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this[0] = selector: /直接 把 该 DOM 元 素 传 递 给 实例 对 和 象 的 伪 数 组 
this.length = 1: 1/ 设置 实例 对 象 的 length 属性 ， 表 示 包 含 1 个 元 素 
| this.context = selector: / 重新 设置 上 下 文 为 DOM 元 素 
| return this; /返回 当前 实例 
下风 四 
让 (typeof selector 一 一 "string" ) { // 如 果 是 选择 符 字 符 串 
| Var e 二 context.getElementsByIaeName(selector); /获取 指定 名 称 的 元 素 


for(var i= 0:i<e.length:iH){ // 使 用 for 把 所 有 元 素 传人 当前 实例 数组 中 
this[1| = elil: 


this.length = e.leneth: /设置 实例 的 length 属性 ， 定 义 包 含 元 素 的 个 数 
this.context = context: / 保存 上 下 文 对 象 
return this: /返回 当前 实例 

} else{ 
this.leneth = 0: /设置 实例 的 length 属性 值 为 0， 表示 不 包含 元 素 
this.context = context: / 保存 上 下 文 对 象 
return this: /返回 当前 实例 


} 
中 
html: fonction(vaD{V 模仿 jQuery 的 html0 方法 ， 为 匹配 DOM 元 素 插 人 html 字符 串 
jQuery.each(this, function(vaD{ ”// 为 每 个 DOM 元 素 执行 回调 图 数 
this.innerHTML = val: 
}, val); 
} 
} 
jQuery fn-init prototype = jQuery fh: 
/扩展 方法 : jQuery 迭代 函数 
J]JQuery.each = function( object, callback., ares ){ 
for(var i = 0: i<object.length: i++){ /使 用 for 渤 代 jQuery 对 象 中 每 个 DOM 元 素 


callback.call(object[i],args): // 在 每 个 DOM 元 素 上 调用 回调 函数 
} 
return object: /返回 jQuery 对 象 


} 


在 上 面 代 担 中 ,为 jQuery 对 象 绑 定 html0 方法 ， 然 后 利用 jQuery0 选择 融 获 取 页 面 中 的 所 有 div 元 素 ， 
调用 html0 方法 ， 为 所 有 匹配 的 元 素 插 人 HIML 字符 串 。 


| < 秀 注意 : each( 的 当前 作用 对 象 是 jQuery 对 象 ， 故 this 指向 当前 jQuery 对 象 ; 而 在 html0 方法 内 部 ， 由 
于 是 在 指定 DOM 元 素 上 执行 操作 ， 则 this 指向 的 是 当前 DOM 元 素 ， 不 再 是 jQuery 对 象 。 


最 后 ， 在 页 面 中 进行 测试 ， 代 人 码 如 下 : 


<script> 

window.onload = function(){ 
$("div").html("<hl> 你 好 </h1>"): 

} 

</script> 

<div></div=> 

<div></div=> 

<div></div> 
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预览 效果 如 图 2.2 所 示 。 


图 2.2 操作 jQuery 对 象 


当然 ， 上 面 示例 所 定义 的 each0 函数 和 html0 方法 的 功能 比较 有 限 。 在 jQuery 框架 中 封装 的 each0 函 ， 
数 功能 就 很 强大 ， 具 体 代 码 将 在 后 面 章节 中 详细 讲解 。 


2.2.7 设计 扩展 


jQuery 提供 了 良好 的 扩展 接口 ， 方 便 用 户 目 定义 jQuery 方法 。 
根据 设计 习惯 ， 如 果 为 jQuery 或 者 jQueryprototype 新 增 方法 ， 直 接 通过 点 语法 ， 或 者 在 jQueryprototype 
对 象 结 构 内 增加 即 可 。 但 是 ， 如 果 分 析 jQuery 源码 ， 会 发 现 它 通 过 extend0 困 数 来 实现 功能 扩展 。 | 

【示例 1】 下 面 代 码 是 jQuery 框架 通过 extend0 函数 扩展 的 功能 。 | 
jQuery.extend({ /扩展 工具 因数 

noConflict: function( deep ) 他， 

isFunction: function( obj ) {1}, 

1SATITray: function( ob] ) {}, 

1isXMLDoc: function( elem ) {}, 

globalEval: function( data ) {} 


站: 
或 者 


jQuery.fh.extend({ /扩展 jQuery 对 象 方法 
show: function(speed,callback){}, 
hide: function(speed.callback){}, 
toggle: function( fn, fn2 ){}, 
fadeTo: function(speed,to,callback){}, 
animate: function( prop, speed, easing, callback ) {}, 
stop: function(clearQueue, gotoEnd){} 
1): 


这 样 做 有 什么 好 处 呢 ? | 
方便 用 户 快速 扩展 jQuery 功能 ， 但 不 会 破坏 jQuery 框架 的 结构 。 如 果 直 接 在 jQuery 源码 中 添加 方法 ， ， 
这 样 容易 破坏 jQuery 框架 的 简洁 性 ， 也 不 方便 后 期 代码 维护 。 如 果 不 需要 某 个 插件 ， 使 用 jQuery 提供 的 扩 
展 工具 添加 ， 只 需要 简单 的 删除 即 可 ， 而 不 需要 在 jQuery 源码 中 寻找 要 删除 的 代码 段 。 | 
extend() 函数 的 功能 很 简单 ， 它 只 是 把 指定 对 和 象 的 方法 复制 给 jQuery 对 象 或 者 jQuery.prototype。 / 
【示例 2】 为 jQuery 类 型 和 jQuery 对 象 定义 了 一 个 扩展 函数 extend0， 设 计 把 参数 对 象 包含 的 所 有 属性 
复制 给 jQuery 或 者 jQueryprototype， 这 样 就 可 以 实现 动态 扩展 jQuery 的 方法 。 
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Var $ =jQuery = function(selector, context ){ /jQuery 构造 了 数 
Tetum new jQuery.fn.init(selector, context ): /jQuery 实例 对 象 
} 
jQuery.fh = jQuery.prototype = { /jQuery 原型 对 象 
init : finction(selector, context){ /初始 化 构造 图 数 
selector = selector || document: /初始 化 选择 器 ， 默 认 值 为 document 
context = context || document: 1// 初始 化 上 下 文 对 象 ， 默认 值 为 document 
if ( selector.nodeType ) { // 如 果 是 DOM 元 素 
this[0] = selector: /直接 把 该 DOM 元 素 传递 给 实例 对 象 的 伪 数 组 
this length = 1: /设置 实例 对 象 的 length 属性 ， 表 示 包 含 1 个 元 素 
this.context = selector: // 重新 设置 上 下 文 为 DOM 元 素 
return this: /返回 当前 实例 
} 
让 (typeof selector 一 一 "string" ) { // 如 果 是 选择 符 字 符 串 
var e = context.getElementsByTaeName(selector): 1/ 获取 指定 名 称 的 元 素 
for(var i= 0;i<e.length:i++){ // 使 用 for 把 所 有 元 素 传 人 当前 实例 数组 中 
this[i| = elil: 
} 
this.length = elength: /设置 实例 的 length 属性 ， 和 定义 包含 元 素 的 个 数 
this.context = context: / 保存 上 下 文 对 象 
return this: /返回 当前 实例 
elset 
this.length = 0: /设置 实例 的 length 属性 值 为 0， 表示 不 包含 元 素 
this.context = context: / 保存 上 下 文 对 象 
retum this: // 返回 当前 实例 
上 
]Querv.fn.Inlitprototype = JQuery.fn:; 
// 扩展 方法 : jQuery 迭代 函数 


J]Query.each = function( object, callback., args ){ 
for(var i= 0: i<object.lenegth: i++)# // 使 用 for 进 代 jQuery 对 象 中 每 个 DOM 元 素 
callback.call(object[i],args): /在 每 个 DOM 元 素 上 调用 回调 函数 


} 

return object: // 返回 jQuery 对 象 
} 
/jQuery 扩展 函数 


J]JQuery.extend = JQuery.fn.extend = function(ob]) { 
for (Var prop In ob]) { 
this[prop] = obj[prop]: 
} 
return this: 


} 
/jQuery 对 象 扩展 方法 
JQuery.fn.extend( { 
html: function(vaD){ // 模仿 jQuery 的 html0 方法 ， 为 匹配 DOM 元 素 插入 html 字符 串 
jQuery.each(this, function(val)){ /为 每 个 DOM 元 素 执行 回调 函数 
this.innerHTML = wal: 
}, val 
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!) 
Window.onload = function(){ 
$("div").html("<hl> 你 好 </h1>="): 


在 上 面 示例 中 ， 先 定义 一 个 jQuery 扩展 函数 extend0， 然 后 为 jQuery 包 原型 对 象 调用 extend0 因数 ， 
为 其 添加 一 个 jQuery 方法 html0。 这 样 就 可 以 设计 出 与 2.2.6 节 相同 的 示例 效果 。 

jQuery 框架 定义 的 extend0 函数 的 功能 要 强大 很 多 ， 它 不 仅 能 够 完成 基本 的 功能 扩展 ， 还 可 以 实现 对 
象 合并 等 功能 ， 详 细 代 码 将 在 后 面 章 节 中 解析 。 


2.2.8 ”传递 参数 


很 多 jQuery 方法 ， 如 有 果 包 含有 参数 ， 一 般 都 要 求 传 递 参数 对 象 ， 例 如 : 
$.ajax(t 

type: "GET", 

url: "test.]s", 

dataType: "script" 
)); 


使 用 对 象 直接 量 作 为 参数 进行 传递 ， 方 便 参 数 管理 。 当 方法 或 者 函数 的 参数 长 度 不 固定 时 ， 使 用 对 象 
直接 量 作 为 参数 进行 传递 有 如 下 优势 。 

名 ”参数 个 数 不 受 限制 。 

回 ” 人 参数 顺序 可 以 随意 。 

这 体现 了 jQuery 用 法 的 灵活 性 。 

如 果 ajax0 函数 的 参数 长 度 是 固定 的 ， 则 参数 位 置 也 固定 ， 如 $.ajax("GET", "testjs","script"”)。 这 种 用 
法 本 身 没有 问题 ,但 是 很 多 jQuery 方法 包含 大 量 的 可 选 参数 ， 参 数位 置 没 有 必要 限制 ， 再 使 用 传统 方式 来 
设计 参数 就 比较 麻烦 。 所 以 使 用 对 象 直接 量 作为 参数 进行 传递 ， 是 最 佳 的 解决 方法 。 

【 示例】 使 用 对 象 直 接 量 作为 参数 进行 传递 ， 这 里 就 涉及 参数 处 理 问 题 ， 如 何 解析 并 提取 参数 ， 如 何 处 
理 默认 值 问题 ， 可 以 通过 下 面 的 方式 来 实现 。 

第 1 步 ， 在 前 面 示例 基础 上 ， 重 写 编写 jQuery.extend0 工具 函数 。 


Var $ =]JQuery = function(selector, context ){ /jQuery 构造 图 数 
retum new jQuery.fn.mit(selector, context ): /jQuery 实例 对 象 
jQuery.fh = jQueryprototype = { /jQuery 厚 型 对 象 


init : function(selector, context) 1/ 初始 化 构造 函数 
selector = selector || document /初始 化 选择 需 ， 默 认 值 为 document 
context = context | document: 1/ 初始 化 上 下 文 对 象 ， 默认 值 为 document 


if ( selectornodeType ) { / 如 果 是 DOM 元 素 
this[0] = selector: // 直接 把 该 DOM 元 素 传 递 给 实例 对 象 的 伪 数组 
this.length = 1: / 设置 实例 对 象 的 length 属性 ， 表 示 包 含 1 个 元 素 
this.context = selector: /重新 设置 上 下 文 为 DOM 元 素 
return this: /返回 当前 实例 

} 


让 (typeof selector 一 一 "string" ) { // 如 果 是 选择 符 字 符 串 
Var e 二 context.getElementsByTagName(selector): “多 获取 指定 名 称 的 元 素 
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for(var i = 0:i<e.length:itHH){ W/ 使 用 for 把 所 有 元 素 传 人 当前 实例 数组 中 
this[i] = el[i]; 


} 
this.length = e.length: /设置 实例 的 length 属性， 定义 包 含 元 素 的 个 数 
this.context = context: 1// 保存 上 下 文 对 象 
return this: /返回 当前 实例 
} else{ 
this.length = 0: /设置 实例 的 length 属性 值 为 0， 表示 不 包含 元 素 
this.context = context: / 保存 上 下 文 对 象 
return this: /返回 当前 实例 
} 
} 
上 
JQuery.fn.mit.prototype = JQuery.fn: 
/扩展 方法 : jQuery 迭代 函数 


JQuery.each = function( object, callback, args ){ 
for(var i= 0: i<object.length: i++){ ”// 使 用 for 迭代 jQuery 对 象 中 每 个 DOM 元 素 
callback.call(object[il,args): ”W/W 在 每 个 DOM 元 素 上 调用 回调 困 数 
} 
return object: /返回 jQuery 对 象 
} 
/本 重新 定义 ]JQuery 扩展 因数 环 冰 六 宗 求 来 来 求 束 求 玉 玉 求 求 玉 玉 求 来 来 玉 求 求 来 玉 求 来 来 求 求 求 来 玉 求 求 玉 玉 求 来 来 玉环 求 来 本 二 本 本 
JQuery.extend = JQuery.fn.extend = function() { 
var destination = arguments[0], source = areuments[1]:// 获取 第 1 个 和 第 2 个 参数 
/如 果 两 个 参数 都 存在 ， 且 都 为 对 象 
if(typeot destination =— "object"” && typeot source =— "object"){ 
/把 第 2 个 参数 对 象 合并 到 第 1 个 参数 对 象 中 ， 并 返回 合并 后 的 对 象 
for (var property In source) { 
destination|property| = source[property |: 
} 
returmnm destination: 
}else{// 如 果 包 含 一 个 参数 ， 则 为 jQuery 扩展 功能 ， 把 插件 复制 到 jQuery 原型 对 象 上 
for (Var prop In destination) { 
this[prop| = destination[propl: 
} 
return this: 
} 


在 上 面 代码 中 重 写 了 jQuery.extend0 工具 函数 ， 让 它 实现 两 个 功能 : 合并 对 象 ， 为 jQuery 扩展 插件 。 

为 此 ， 在 工具 函数 中 通过 应 条件 语句 检测 参数 对 象 arguments 所 包含 的 参数 个 数 ， 以 及 参数 类 型 ， 来 决 
定 是 合并 对 象 ， 还 是 扩展 插件 。 

如 果 用 户 给 了 两 个 参数 ， 且 都 为 对 象 ， 则 把 第 2 个 对 象 合并 到 第 1 个 对 象 中 ， 并 返回 第 1 个 对 象 ; 如 果 
用 户 给 了 一 个 参数 ， 则 继续 沿用 前 面 的 设计 方法 ， 把 参数 对 象 复制 到 jQuery 原型 对 象 上 实现 搬 件 扩展 。 

第 2 步 ,， 利用 jQuery.extend0 工具 图 数 为 jQuery 扩展 一 个 插件 fontStyle0， 使 用 这 个 插件 可 以 定义 网 页 
字体 样式 。 

WiQuery 对 象 扩展 方法 

jQuery fn.extend({ 


DO 。 
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fontStyle: function(obj){ // 设置 字体 样式 
var defaults = { /设置 默认 值 ， 可 以 扩展 
color: "#000", 
bgcolor : "#1f"", 
S1Ze : "14px 
style: "normal" 
下 
defaults = jQuery.extend(defaults, obj || 人) 如 果 传 递 参 数 ， 则 覆 善 厚 默认 人 参数 
jQuery.each(this, functionO{ / 为 每 个 DOM 元素 执行 回调 图 数 


this.style.color = defaults.color: 
this.style.backeroundColor = defaults.becolor: 
this.style.ftontSize = defaults.size: 
this.style.ftontStyle = defaults.style: 

}); 

) | 
) | 

在 上 面 的 插件 函数 fontStyle() 中 ， 首 先 ， 定 义 一 个 默认 配置 对 象 defaults， 初 始 化 字体 样式 : 字体 颜色 
为 黑色 ， 字 体育 景色 为 日 色 ， 字 体 大 小 为 14 像 系 ,字体 样式 为 正常 。 

其 次 ,使 用 jQuery.extend0 工具 函数 ， 把 用 户 传递 的 参数 对 象 obj 合并 到 默认 配置 参数 对 象 defaults， ， 
返回 并 覆盖 掉 defaults 对 象 。 为 了 避免 用 户 没有 传递 参数 ， 可 以 使 用 “obj || {}” 检 测 用 户 是 否 传递 参数 对 
象 ， 如 果 没有 ， 则 使 用 空 对 象 参 与 合并 操作 。 | 

最 后 ,使 用 迭代 陋 数 jQuery.each0 逐个 访问 jQuery 对 象 中 包含 的 DOM 元 素 ， 然 后 分 别 为 它 设 置 字体 样式 。 

第 3 步 ， 在 页 面 中 调用 jQuery 查找 所 有 段落 文本 p， 然 后 调用 fontStyle 方法 设置 字体 颜色 为 日 色 ， 字 
体育 景色 为 黑色 ， 字 体 大 小 为 24 像素 ,字体 样式 保持 默认 值 。 

window.onload = function(){ | 

$("p").fontStyle( { 
color: "#fI¥", 
becolor: "#000", 
sl1Ze:"24pX" 
入: 
1 


第 4 步 ， 在 <body> 内 设计 两 段 文 本 ， 最 后 在 浏览 器 中 查看 效果 ， 如 图 2.3 所 示 。 


<p> 少年 不 识 釉 滋味 ， 爱 上 层 楼 。 爱 上 层 楼 ， 为 赋 新 词 强 说 愁 。</p> 
<p> 而 今 识 尽 悉 滋味 ， 欲 说 还 休 。 欲 说 还 休 ， 却 道 天 凉 好 个 秋 。</p> 


图 2.3 实现 jQuery 扩展 的 参数 传递 


在 jQuery 框架 中 ，extend0 函数 功能 很 强大 ， 它 既 能 够 作为 jQuery 的 扩展 方法 ， 也 能 够 处 理 参数 对 象 ， 
并 覆盖 默认 值 ， 在 后 面 章节 中 将 详细 分 析 它 的 源码 。 
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2.2.9 ”设计 独立 空间 


在 页 面 中 引入 多 个 JavaScript 框架 ,或 者 编写 了 了 大量 JavaScript 代码 时 ， 用 户 很 难 确保 这 些 代 码 不 发 生 
冲突 。 任 何人 都 无 法 确保 自己 很 熟悉 每 个 框架 的 源码 ， 难 免 会 出 现 名 字 冲 突 ， 或 者 功能 覆盖 现象 。 为 了 解 
决 这 个 问题 ， 必 须 把 jQuery 封装 在 一 个 孤立 的 环境 中 ， 避 免 与 其 他 代码 相互 干扰 。 

解决 这 个 问题 ， 一 般 使 用 JavaScript 财 包 体 来 实现 。 

首先 ， 读 者 要 知道 ，JavaScript 有 且 仅 有 两 个 作用 域 : 全 局 作用 域 和 图 数 作用 域 。 晒 数 作 用 域 是 局 部 作 
用 域 ， 对 外 是 不 可 见 的 ， 外 部 代码 无 权 访问 函数 体内 的 代码 。 

调用 了 靖 数 时 ，JavaScript 会 自动 为 其 生成 一 个 上 下 文 环境 ， 这 个 环境 是 临时 的 ， 函 数 调 用 完毕 后 ， 这 个 
上 下 文 环 境 会 自动 被 注销 。 


宣 提示 : 如 果 每 次 调用 函数 后 ， 上 下 文 环境 都 被 保留 ， 那 么 内 存 洪 出 就 不 可 避免 ， 因 为 在 页 面 中 有 大 量 
的 函数 调用 操作 ， 一 个 浏览 器 可 能 会 开局 很 多 页 面 ， 每 个 上 下 文 环境 都 要 占据 一 定 的 内 存 空 间 ， 
只 进 不 出 ， 内 存 肯 定 会 被 宕 机 。 所 以 ,调用 完毕 后 ,就 没有 必要 继续 保留 这 个 上 下 文 环境 。 


【示例 1】 设 计 一 个 匿名 也 数 ， 然 后 目 调 用 ， 瞬 间 产 生 一 个 临时 的 上 下 文 环境 。 
(function(){ 

/ 图 数 体 
1)0 


其 次 ， 如 果 在 匿名 哨 数 中 引用 了 外 部 变量 ,那么 只 要 这 个 引用 一 直 存 在 ， 则 生成 的 上 下 文 环境 就 一 直 
存在 ， 这 样 就 产生 了 闭 包 体 。 所 以 ， 闭 包 体 是 一 直 存 在 的 ， 除 非 手 动 销 毁 外 部 的 引用 。 
闭 包 体 的 存在 也 改变 函数 调用 后 的 运行 逻辑 ， 这 时 调用 对 象 一 直 存 在 ， 并 一 直 保 存 着 困 数 内 各 种 局 
部 变量 的 信息 。 
【示例 2】 把 外 部 window 对 象 传递 给 匿名 函数 ， 则 自 调 用 后 ， 限 数 体内 的 私有 变量 window 与 外 部 变量 
window 就 一 直 保 持 着 引用 关系 ,这 个 上 下 文 环境 也 就 一 直 存 在 。 
(function(window) 1 
/ 陨 数 体 
})(window) 
最 后 ， 对 于 因数 作用 域 来 说 ， 也 必须 通过 这 种 方式 保持 与 外 界 的 联系 ， 否 则 外 界 无 法 访问 内 部 的 信息 ， 
则 定义 的 财 包 体 也 就 没有 存在 的 价值 了 。 
如 果 和 希望 jQuery 框架 与 其 他 代码 完全 隔离 ， 闭 包 体 是 一 种 最 佳 的 方式 。 
【示例 3】 把 2.2.8 节 设 计 的 jQuery 框架 模型 放 入 匿名 函数 中 ,然后 自 调 用 ,并 传人 window 对 象 。 
(function(Window) 1 
var$=jQuery = function(selector, context ){ /jQuery 构造 图 数 
return new jQuery.fhn.init(selector, context ):; //jQuery 实例 对 象 
: 


jQuery.fh = jQuery.prototype = { /jQuery 原型 对 象 
init : function(selector, context){ /初始 化 构造 函数 
/ 省略 代码 ， 可 参考 2.2.8 节 示 例 ， 或 本 节 示 例 源 代码 
} 
} 
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JQuery.fh.mt.prototype = JQuery.fn; 


/扩展 方法 : jQuery 迭代 晴 数 
]Query.each = function( oblect callback args ){ 
for(var i= 0: i<objectlength: iHH){ /使 用 for 迭代 jQuery 对 象 中 每 个 DOM 元 素 
callback.call(object[il,args): // 在 每 个 DOM 元 素 上 调用 回调 晴 数 
} 
return object: /返回 jQuery 对 象 
| 
/jQuery 扩展 晴 数 


]Query.extend = JQuery.fn.extend = function() { 
var destination = arguments[0], source = areuments[1]: // 获取 第 1 个 和 第 2 个 参数 
// 如 果 两 个 参数 都 存在 ， 且 都 为 对 象 
i{( typeof destination 一 "oblect" && typeot source 一 "oblect ){ 
/ 把 第 2 个 参数 对 象 合并 到 第 1 个 参数 对 象 中 ， 并 返回 合并 后 的 对 象 
for (Var property In source) { 
destination|[property| = source[property|: 


} 
return destination: 
}elset{ // 如 果 包 含 一 个 参数 ， 则 把 插件 复制 到 jQuery 原型 对 象 上 


for (Var prop In destination) { 
this[prop| = destination[prop|: 

} 

return this: 


} 


window.]Query = window.$ = JQuery: 
})(window) | 
倒数 第 二 行 代 人 三 “window.jQuery = window.$ = jQuery:” 的 主要 作用 是 : 把 闭 包 体内 的 私有 变量 jQuery | 
传递 给 参数 对 象 window 的 jQuery 属性 ， 而 参数 对 象 window 引用 外 部 传人 的 window 变量 ，window 变量 | 
引用 全 局 对 象 window。 所 以 ， 在 全 局 作用 域 中 就 可 以 通过 jQuery 变量 来 访问 闭 包 体内 的 jQuery 框架 ， 通 | 
过 这 种 方式 向 外 界 暴 露 目 己 ， 人 允许 外 界 使 用 jQuery 框架 。 但是， 外 界 只 能 访问 ]Query， 不 能 访问 闭 包 体内 | 
其 他 私有 变量 。 
至 此 ，jQuery 框架 的 设计 模型 就 基本 完成 了 ， 后 面 的 工作 就 是 根据 需要 使 用 extend0 图 数 扩展 jQuery 
功能 。 例 如 ， 在 闭 包 体外 直接 引用 jQuery.fn.extend0 盟 数 为 jQuery 扩展 fontStyle 插件 。 


/jiQuery 对 象 扩展 方法 
jQuery.fn.extend({ 
fontStyle: function(obj){ /设置 字体 样式 
var defaults = { /设置 默认 值 ， 可 以 扩展 


color: "#000", 
bgcolor : "#1f", 
SIZe : "14px", 
style : "normal" 


defaults = jQuery.extend(defaults, obj || 人): // 如 果 传 递 参 数 ， 则 蘑 羡 原 默 认 参 数 
jQuery.each(this, functionO{ / 为 每 个 DOM 元 素 执 行 回 调 盟 数 


thls.style.color = defaults.color: 
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this.style.backeroundColor = detaults.begcolor: 
this.style.fontSize = defaults.size: 
| thls.style.tontstyle = detaults. style: 
| 1 


2 | \ 
) 
| 使 用 下 面 代码 就 可 以 在 页 面 中 使 用 这 个 插件 了 。 


window.onload = function(){ 
$("p").fontStyle( +{ 
color: "#fff", 
becolor: "#000", 
slZe:"24pX" 


FE 
} 


上 面 代码 与 2.2.8 节 相 同 ， 这 里 不 再 缆 述 ， 本 例 完整 代码 请 参考 本 节 示 例 源 代码 。 


2.3 jQuery 架构 


2.1 节 和 2.2 节 从 JavaScript 角度 演绎 jQuery 框架 模型 的 实现 过 程 。 本 节 将 从 不 同 视角 和 层级 解析 
jQuery 框架 的 内 部 结构 和 逻辑 设计 。 


”2.3.1 jQuery 结构 变化 概述 


jQuery 框架 结构 经 历 4 个 发 展 阶 段 ， 简 单 说 明 如 下 。 

1. 原始 结构 

在 jQuery 1.1.3 版 本 (2007 年 7 月 ) 及 之 前 ,jQuery 框架 没有 封闭， 在 全 局 作用 域 中 直接 定义 jQuery 
类 型 。 例 如 , 在 jQuery-1.1.3js 中 ， 框 架 结 构 代 人 码 如 下 : 


var jQuery = function(a,c) { /构造 图 数 
if (window — this || !this.init ) 
Tetum new JQuery(a,c): 
retum this.mnit(a,c): 
}; 
var $ = JQuery; 
jQuery.fh = jQuery.prototype = { / 原型 
init: fnction(a,c) { /初始 化 函数 
下 


jQuery.extend = jQuery.fn.extend = fnction0 { // 定 义 扩 展 工 具 


上 
jQuery.extend({ 1/ 扩展 jQuery 方法 
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} 

2. 初步 封装 

从 jQuery 1.1.4 版 本 (2007 年 8 月 ) 开始 ,jQuery 框架 开始 注意 代码 的 封 治 问 题 ， 把 jQuery 源码 全 部 
放 在 一 个 自 调用 的 匿名 函数 中 。 


(function(){ 

DO 

在 匿 名 函数 内 直接 通过 window.jQuery 和 window.$ 暴露 自己 ， 对 外 开放 jQuery 的 使 用 权 。 
(function(){ 


Var JQUuery = window.JQuery = function(a,c) { 
(widow =— this || ‘this.mit ) 
return new JQuery(a,c): 
retum thls.Inlt(a.c): 
Window.$ = JQuery; 
D0 


3.， 完善 封装 
从 jQuery 1.4.0 版 本 (2010 年 1 月 ) 开始 ,jQuery 框架 开始 完善 封装 的 结构 ， 注 重 隐 私 保护 ， 确 保 内 
外 变量 的 隔离 。 例 如 , 在 jQuery 1.4.0.js 中 ， 框 架 结 构 代 但 如 下 : 


(function( window, undefined ) { // 封装 
Var ]Query = function( selector, context ) { /构造 果 数 
return new JQuery.fh.mit( selector, context ): 
} 
jQuery.fhn = jQuery.prototype = { // 原型 
init: function( selector context ) { /初始 化 函数 
} 
JQuery.fn.nit.prototype = JQuery.fn: // 跨 域 访 问 
jQuery.extend = jQuery.fh.extend = fnction0 1 /W/W 扩展 函数 
. 
jQuery.extend({ /扩展 方法 
}):; 
window.jQuery = window.$ = jQuery: /暴露 自己， 对 外 开放 jQuery 
Dwindow): /把 全 局 对 象 window 传人 闭 包 体 ， 确 保 内 外 隔离 


六 提示 : 从 jQuery 1.3.0.js 版 本 开始 ，jQuery 框架 初步 成 型 ， 具 有 模块 化 的 组 织 架 构 。 也 是 从 这 个 版 本 开 
始 ，jQuery 把 选择 器 模块 独立 出 来 ， 并 命名 为 Sizzle。 


4 高 级 封装 


从 jQuery 1.11 版 本 和 jQuery 2.1 版 本 (2014 年 1 月 ) 开始 ，jQuery 框架 结构 做 了 较 大 升级 ， 主 要 目的 
是 适应 JavaScript 环境 的 变化 。 
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随 看 JavaScript 语言 的 广泛 应 用 ， 以 及 JavaScript 编 详 环境 的 多 样 性 ， 如 Node.js 的 出 现 ，JavaScript 不 
。 仅仅 在 客户 端 浏览 器 中 运行 ， 还 可 能 在 服务 器 端 ， 或 者 其 他 设备 、 环 境 中 运行 。 而 在 非 客 户 端 浏览 器 中 没 
。 有 全 局 对 象 window， 因 此 为 了 适应 不 同 的 环境 ，jQuery 需要 对 框架 结构 进行 重 构 。 

例如 ， 在 jQuery 1.11.0js 中 ， 框 架 结构 代码 如 下 : 


(function( global. tactory ) { 
(typeot module =—— "object" && typeot module.exports =—= "object" ) { 
module.exports = global.document ? 
factory( global. true ) : 
function( w ) 1{ 
1 二 (Iw.document ) { 
throw new Error( "jQuery requires a window with a document" ); 


return factory( wW ): 
} else { 
tactory( global ): 


} 
+(typeof window !— "undefined" ? window : this, function( window, noGlobal ) { 
var JQuery = function( selector, context ) { 
retum new JQuery.fn.mit( selector, context ): 
让 
JQuery.fhn = JQuery.prototype = 


mit = jQuery.fn.mit = function( selector, context ) { 


|s 
' 
]Query.extend = JQuery.fn.extend = function() { 


和 
retum J]Query:; 
1)); 


关于 这 段 结构 代 码 的 详细 解析 ， 请 参考 2.3.2 节 介 绍 。 


”2.3.2 jQuery 新 框架 结构 


下 面 以 jQuery 3.2.1 版 本 为 例 来 说 明 jQuery 新 框架 结构 ， 主 要 代码 如 下 : 


(function (global, factory) { 
// 启动 严格 模式 
"Use strict"; 
/检测 当前 环境 是 否 文 持 模块 和 导出 模块 功能 ， 兼 容 CommonJS 类 环境 
1{ (typeot module —= "object" && typeotmodule.exports 一 二 "oblect ) { 
module.exports = global.document ? 
factory(global. true) : 
function (WwW) { 
1 二 (Iw.document) { 
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throw new Eiror("]JQuery requires a window with a document ): 


} 
return factorV(W): 
上 
} else { 
/兼容 浏览 器 环境 
factolry(global): 
} 


// 如 果 没 有 定义 window， 传 递 this 
H(typeof window !— "undefined" ? window : this, function (Window, noGlobal) { 
var 
Verslon = "3.2.1", 
/定义 jQuery 的 本 地 副本 
Query = function (selector, context) { 
/这 里 使 用 jQuery.fn.initO 构造 了 一 个 jQuery 对 象 
return new JQuery.fn.mit(selector, context): 


} 
/jQuery 原型 对 象 
JQuery.fh = JQuery.prototype = { 


a 
/扩展 方法 
JQuery.extend = JQuery.ftn.extend = function () { 


/扩展 jQuery 库 
]QuerVextend({ 
Var root]Query, 
init = JQuery.fn.mt = function (selector, context, root) { 


}; 


return JQuery:; 


寥 提示 : 自从 CommonJS 和 NodeJS 两 个 项 目 出 现 ，JavaScript 作为 本 地 编程 语言 开始 流行 。 


CommonJSs API 定 义 了 很 多 普通 应 用 程序 使 用 的 API， 主 要 指 非 浏览 器 的 应 用 。 它 的 终极 


目标 是 提供 一 个 类 似 Python、Ruby 和 Java 标准 库 ， 让 用 户 可 以 使 用 JavaScript 开发 服务 器 端 
JavaScript 应 用 程序 、 命 令 行 工 具 、 图 形 界 面 应 用 程序 、 混 合 应 用 程序 (如 Adobe AIR )。 
CommonJSs 是 一 种 规范 ，NodeJS 是 这 种 规范 的 实现 ， 官 网 地 址 为 http://Wwww.commonjs. 
org/。 两 者 关系 类 似 于 ECMAScript 和 JavaScript。 
因此 ，jQuery 不 仅 要 考虑 浏览 器 JavaScript 编程 ， 还 要 考虑 其 他 本 地 应 用 程序 编程 。 


下 面 解析 上 述 代码 。 
第 1 步 ， 可 以 看 到 ， 整 个 jQuery 框架 被 置 于 一 个 匿名 晴 数 中 ， 并 自 调 用。 
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(function (global, factory) { 
+)(typeot window !=—— "undefined" ? window : this, function (Window., noGlobal) { 
»; 
匿名 上 因数 包含 两 个 形 参 : global 、factory。 
加 ”global: 定义 全 局 对 象 。 在 浏览 兹 中 指 代 window 对 象 ， 在 NodeJS 环境 中 指 代 this。 
回 factory: 设置 工厂 模式 。 仅 指 jQuery 框架 。 
在 调用 匿名 哺 数 时 ， 传 入 两 个 实 参 。 
回 typeof window ! 一 "undefined" ? window : this: 使 用 typeof 运算 符 检测 当前 环境 中 是 否 存 在 window 
对 象 。 如 果 存 在 ， 则 传人 window 对 象 ; 如 果 不 存 在 ， 则 传人 this。 

回 function (window, noGlobal) 好 : 一 个 明 数 直接 量 表 达 式 ， 实 际 上 就 是 jQuery 库 限 数 。 
第 2 步 ， 下 面 来 分 析 一 下 外 层 匿名 胃 数 。 
(function (global, factory) { 

/ 启动 严格 模式 

"Use strict": 

1/ 检测 当前 环境 是 否 支 持 模块 和 导出 模块 功能 ， 兼 容 CommonJS 类 环境 

1f (typeot module —= "object" && typeof module.exports ——— "object") { 

module.exports = global.document ? 
factory(global, true) : 
function (w) + 
1 (Iw.document) + 
throw new Error("]JQuery requires a window with a document ): 


} 


return factory(Ww); 
je 

+ else{ 

/兼容 浏览 器 环境 

tactory(elobal): 
3 
// 如 果 没 有 定义 Window， 传 递 this 

+)(typeot window !=— "undefined" ? window : this, function (Window, noGlobal) { 


}); 
第 3 行 代码 : "use strict";， 表 示 启 动 严格 模式 。 


岩 提示 : 除了 正常 运行 模式 外 ，ECMAscript 5 新 添加 了 第 二 种 运行 模式 : 严格 模式 。 顾 名 思 义 ， 这 种 模 

| 式 使 得 JavaScript 在 更 严格 的 条 件 下 运行 ,体现 了 JavaScript 更 合理 、 更 安全 、 更 严谨 的 发 展 方 

| 向 ， 包 括 正 10+ 在 内 的 主流 浏览 器 都 已 经 支持 它 ， 许 多 大 项 目 已 经 开始 全 面 使 用 它 。 严 格 模式 
具有 以 下 优势 。 

消除 JavaScript 语法 的 一 些 不 合理 、 不 严谨 之 处 ,减少 一 些 怪 开行 为 。 

消除 代码 运行 的 一 些 不 安全 之 处 ,保证 代码 运行 的 安全 。 

提高 编译 器 效率 ， 提 高 运行 速度 。 

为 未 来 新 版 本 的 JavaScript 做 好 铺垫。 


四 轴 轴 辐 


a i 
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如 果 读 者 想 了 解 在 严格 模式 下 JavaScript 的 语法 和 用 法 ， 请 扫 码 阅读 。 

第 3 步 ， 第 5$ 行为 一 个 条 件 语 句 ， 检 测 在 当前 环境 下 是 否 文 持 module 和 module.exports 
对 象 。 如 果 文 持 ， 则 说 明 当 前 环境 为 NodeJS 运行 环境 ; 如 琳 不 支持 ， 则 说 明 当 前 环境 为 浏览 
外 运行 环境 。 

L (typeot module —= "object" && typeotmodule.exports 一 二 "object ) { 


写 ” 提示: module 管理 是 NodeJS 中 比较 有 特色 的 部 分 ， 而 JavaScript 没有 模块 系统 ， 没 有 标准 库 ， 不 能 自 
动 加 载 和 安装 依赖 。 


第 4 步 ， 在 NodeJS 环境 下 ， 使 用 module.exports = global.document 引入 全 局 作用 域 下 的 document 对 象 。 
如 果 引 入 成 功 ， 则 调用 factory(global, true)， 在 NodeJS 环境 中 安装 jQuery 库 ; 如 果 引 人 失败 ， 则 在 明 数 作 
用 域 中 尝试 引入 。 | 

module.exports = global.document ? | 

factory(elobal, true) : 
function (Ww) { 
1 (I!w.document) { 
throw new Error("]JQuery requilres a window with a document"): 


} 


}; | 

第 5 步 ， 在 函数 作用 域 中 ， 默 认 参 数 w 表示 全 局 对 象 ， 再 次 尝试 探测 wdocument 是 否 存在 。 如 果 不 
存在 ， 则 抛 出 异常 ， 警 告 jQuery 库 需 要 一 个 包含 document 的 全 局 作用 域 。document 表示 一 个 DOM 文 档 
对 象 。 

第 6 步 ， 如果 在 函数 作用 域 中 探测 到 document， 则 返回 factory(w)。 也 就 是 调用 factory(w)， 安 装 
jQuery 库 ， 并 把 特定 的 全 局 对 象 w 传人 jQuery 安装 函数 。 | 

第 7 步 ， 如 果 在 浏览 器 环境 中 ， 则 直接 调用 factory(global)， 安 装 jQuery 库 ， 并 把 全 局 对 象 global 传 人 
jQuery 安 狭 国 数 。 


+ else { 
1/ 兼容 浏览 占 环 境 
factory(elobal): 

} 


总 提示 : 这 里 的 global 表示 window 对 象 。 
第 8 步 , 在 jQuery 安装 函数 中 ,包含 两 个 参数 : window、noGlobal。 
function (window, noGlobal) { 
) | 


第 一 个 形 参 window 表示 全 局 对 象 ， 第 二 个 形 参 表示 一 个 标识 变量 ， 确 定 第 一 个 参数 是 否 为 最 高 作 
用 域 。 
第 9 步 ， 当 参数 noGlobal 为 undefined， 或 者 为 false 时 , 说明 当前 环境 有 全 局 对 象 window， 可 使 用 


。31。 


zy 以 入 门 到 精通 ( 竹 课 精 信用) 


“window.jQuery = window.$ = jQuery;” 开 放 jQuery 访问 权 。 如 果 为 NodeJS 环境 ， 则 没有 window 对 象 ， 通 
过 “return jQuery:” 返 回 jQuery 控制 权 。 
function (Wimdow. noGlobal) { 


// Expose JQuery and $ 1dentifiers, even im AMD 
// (#7102#comment:10, https://aithub.com/jquery/Jquery/pull/Ss7) 
/ and CommonJs tor browser emulators (#13566) 
if (InoGlobal) { 
window.jQuery = window.$ = jQuery: 


2.4 jQuery 构造 函数 


jQuery 提供 唯一 的 接口 一 一 Query0 构造 郴 数 。jQuery 把 所 有 的 功能 和 操作 都 包 交 在 一 个 jQuery0 构造 
盟 数 中 ， 它 的 核心 功能 都 是 通过 这 个 胃 数 实现 的 。jQuery 中 的 一 切 都 基于 这 个 图 数 ， 或 者 说 都 是 在 以 茶 种 
方式 使 用 这 个 畏 数 。 

jQuery0 构造 滑 数 能 够 接收 任意 类 型 的 参数 ,但 是 能 够 正确 解析 的 参数 包括 下 面 3 种 类 型 。 


2.4.1 jQuery([selector [context]]) 接口 


jQuery0 构造 函数 最 基本 的 用 法 就 是 向 它 传递 一 个 表达 式 ， 通 常 由 CSS 选择 右 组 成 ， 然 后 根据 这 个 表 

达 式 来 查找 所 有 匹配 的 元 素 。 接 口 用 法 如 下 : 

J]JQuery(|[selector,[context||) 

参数 说 明 : 

加 selector: 可 选 参数 ， 用 来 查找 的 表达 式 ， 如 CSS 选择 央 字 符 串 。 

加 ”context: 可 选 参 数 ， 作 为 待 查找 的 DOM 元 素 集 、 文 档 或 jQuery 对 象 。 

六 提示 : 在 默认 情况 下 ， 如 果 没 有 指定 context 参数 ，jQuery0 构造 函数 将 在 当前 的 HTML document 中 查 
找 DOM 元 素 ; 如 果 指 定 了 context 参数 ， 如 一 个 DOM 元 素 集 或 jQuery 对 象 ， 那 么 就 会 在 这 个 
context 中 查找 。 

在 jQuery 1.3.2 版 本 以 后 ，jQuery0 返回 的 元 素 顺序 等 同 于 在 context 中 出 现 的 先后 顺序 。 
1. JQuery() 

如 果 没 有 指定 任何 参数 ， 则 返回 一 个 空 的 jQuery 对 象 。 例 如 : 

alert(jQueryO.length): // 人 返回 0 


【源码 解析 】 
在 jQuery 源码 中 ， 可 以 看 到 initO 初始 化 处 理 阴 数 首先 处 理 无 参数 的 情况 。 
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1/ 初始 化 处 理 晴 数 
mit = JQuery.fn.mit = function (selector, context, root) { 

Var match, elem: 

/外 处理: $(""). $(null), $(undefined), $(false) 

1f (I'selector) { 

return this: 
} 
如 果 jQuery0 参数 为 空 ， 或 者 为 空 字 符 串 、null、undeftined 、false 等 假 值 情况 ， 将 直接 返回 this 原型 对 
象 ， 该 对 象 不 包含 任何 DOM 元 素 ，length 属性 为 默认 值 0。 

2. JQuery(string) 
如 果 传 和 一 个 字符 串 ， 则 可 能 需要 处 理 的 条 件 比 较 复 洒 。 例 如 : 


jQuery("#box") /处理 CSS 选择 器 

jQuery("<div id='"box'>") // 处 理 HTML 字符 串 

【源码 解析 】 

在 jQuery 源码 中 ， 可 以 看 到 initO 初始 化 处 理 明 数 的 第 2 个 条 件 包 含 如 下 代码 。 
/处 理 HIML 字符 串 


if (typeof Selector 一 二 "string") { 
/处 理 各 种 类 型 的 HIML 字符 串 
} 


该 条 件 下 的 jQuery 源码 将 在 2.4.2 节 详 细 解 析 。 
3. jQuery(element) 
如 果 传 人 一 个 DOM 元 素 ， 则 返回 一 个 包含 该 元 素 的 jQuery 对 象 。 例 如 : 


var ele = document.createElement("div"); 
alert(jQuery(ele).leneth): 1/ 返回 1 
或 

<dv 1d="box"></dIv> 

<=script> 

var ele = document.getElementById("box"): 


alert(jQuery(ele).leneth): /返回 1 
</script> 


【源码 解析 】 
在 jQuery 源码 中 ， 可 以 看 到 initO 初始 化 处 理 肯 数 的 第 3 个 条 件 包含 如 下 代码 。 


/ 处理: $(DOMElement) 
} else if (selector.nodeType) {// 如 果 选 择 髓 包含 nodeType 属性 ， 说 明 第 一 个 参数 为 DOM 元 素 


this[0] = selector: /在 jQuery 中 存储 该 DOM 元 素 
this.length = 1: // 重 置 length 属性 值 为 1 
return this: /返回 jQuery 对 象 


} 


4. jQuery(object) 
如 果 传 人 一 个 Object 对 象 ， 则 返回 一 个 包含 该 对 象 的 jQuery 对 象 ， 即 将 参数 对 象 封装 为 jQuery。 例如 : 
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Var ob]= { 
a:l, 

| be2 

| 上 

console.dir(jQuery(obj)): 


在 Firefox 浏览 带 中 可 以 看 到 控制 台 输 出 的 Object 结构 信息 ， 如 图 2.4 所 示 。 


| [9 ”可 寿 庙 控制 癌 调试 禾 样 过 壤 将 帮 性 韶 内 下 网 络 存 健 国 * 园 回 寂 日 口 
| 
| a : 
| 前 | 守 过 汪 连 出 口 持 坊 B 志 
| 

kb GET http: /localhost:Be80/mysite/test5 .htm] THTTPFL.1 384 Mot Modified lms] 总 


kb GET http:/ /localhost!:sese/mysite/ jquery jquery-3.2.1.]s IHTTPF1.1 288 OK Brms] 


Test5.hntnl :19:1 


| 
| 

| 0 
| Eb add: Tunction addr 

kE addBack: function sddBackt' 

Ek addiljass: +unction addLlasst) 


| 图 2.4 显示 jQuery 对 象 结构 1 


< 负 注意 : 很 少 使 用 这 种 用 法 ， 用 户 不 能 在 返回 的 jQuery 对 象 上 调用 与 DOM 相关 的 操作 方法 ， 因 为 当前 
jQuery 对 象 中 包含 的 元 素 不 是 DOM 元 素 ， 而 是 一 个 JavaScript 对 象 。 


5. JQuery(elementArray) 

如 果 传 人 一 个 DOM 元 素 集 合 ， 则 返回 一 个 包含 所 7 
/ 小 为 jQuery。 

| 例如 ， 在 下 面 


了 DOM 元 素 的 jQuery 对 象 ， 即 将 DOM 元 素 集合 圭 


示例 中 ， 分 别 使 用 document.getElementsByTagName 在 文档 中 匹配 所 有 Dp 元素, 或 者 使 用 
<s， 则 在 控制 台 可 


document.createElement 创建 两 个 p 元 素 ， 然 后 组 成 一 个 数组 ， 最 后 使 用 jQuery0 进行 封 纪 
以 看 到 输出 的 jQurey 对 象 ， 如 图 2.5 所 示 。 


<p></p> 
| <p></p> 
| <script> 
| var eles = document.getElementsByTagName("p"); 
| console.dir(JQuery(eles)):; 
| </script> 


或 者 


var eles = [document.createElement("p"), document.createElement("p")|:; 


console.dir(JQuery(eles)); 


| [ 理 看 十 ”入 齐 | 台 ” 调 记 亩 杆 二 本 盖 忻 杞 和 内行 网 消 存 情 田园 目 密 日 可 
| 

| 前 宇 过 巡 扩 出 口 持 党 日 志 
| [ test6., html:17:1 


6 《py 如 


| 

1 = 

| 了 :二 pz + 

| length: 2 

Ek proto : Object { jquerys "3.2.1", constructors JQueryt)y 
leneth: 8 .1 


| 图 2.5 显示 jQuery 对 象 结构 2 
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6. jQuery(Query) 

如 果 传 人 一 个 jQuery， 则 返回 一 个 新 的 jQuery 对 象 ， 这 个 对 象 是 参数 jQuery 对 象 的 复制 品 。 
总 提示 : 一 般 通过 这 种 方式 复制 一 个 jQuery 对 象 。 

【源码 解析 】 

在 jQuery 源码 中 ， 可 以 看 到 initO 初始 化 处 理 消 数 中 使 用 jQuery.makeArray0 函数 来 处 理 参数 为 Object、 
Arry 和 jQuery。 

mit = jQuery.fn.mit = function (selector, context, root) { 


return JQuery.makeArray(selector, thls): 
下 
当 参 数 为 JavaScript 对 象 、DOM 集合 或 数组 、jQuery 对 象 时 ， 将 使 用 jQuerymakeArray0 把 它们 封装 
jQuery.makeArray0 工具 因数 可 以 把 类 数组 转换 为 数组 ， 或 者 合并 成 两 个 类 数组 ， 其 源码 如 下 : 


// 将 类 数组 对 象 转换 为 数组 对 象 
makeArray: function (arr., results) { 


var ret = results || []: 1/ 如 果 第 2 个 参数 不 存在 ， 则 默认 为 空 数组 
if (arr != null) { / 如果 第 1 个 参数 存在 ， 则 进行 转换 
if (isArrayLike(Object(ar))) { / 如 果 参 数 为 类 数组 ， 则 把 它 合并 到 第 2 个 参数 数组 中 
jQuery.merge(ret, 
typeof ar 一 一 "string" ? [arr] : ar // 如 果 为 字符 串 ， 则 把 它 包 装 为 数组 
); 
} else { 1/ 如 果 不 为 类 数组 ， 如 数组 ， 则 动态 调用 Array 原生 方法 push 
/把 第 1 个 参数 推 人 第 2 个 参数 数组 的 尾部 
push.call(ret, arr): 
} 
} 
return ret: /返回 第 2 个 参数 数组 


isArrayLike() 函数 可 以 判断 一 个 对 象 是 否 为 类 数组 ，jQuerymerge0 工具 函数 能 够 合并 两 个 数组 或 类 数 | 
组 。 由 于 代码 比较 简单 ， 此 处 不 再 展开 说 明 ， 详细 代码 可 以 搜索 、 参 考 本 书 提供 的 注释 版 jQuery 源码 文件 。 


2.4.2 jQuery(html,[ownerDocumentl) 接口 


该 接口 能 够 根据 提供 的 原始 HTML 标记 字符 串 ， 动 态 创 建 由 jQuery 对 象 包装 的 DOM 元 素 ， 同 时 也 可 | 
以 设置 一 系列 的 属性 、 事 件 等。 接口 用 法 如 下 : | 
J]Query(html.[ownerDocument| ) 
JQuery(html,props ) 
回 html: 必 设 参数 ， 用 于 动态 创建 DOM 元 素 的 HTML 标记 字符 串 。 
加 ownerDocument: 可 选 参数 ， 创 建 DOM 元 素 所 在 的 文档 。 
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回 “props: 可 选 参数 ， 用 于 附加 到 新 创建 元 素 上 的 属性 、 事 件 和 方法 ， 以 对 象 直接 量 (Map ) 的 形式 设 
置 的 配置 参数 。 
【示例 】 下 面 示例 动态 创建 一 个 p 元 素 ， 并 添加 到 body 元 素 上 ， 设 置 p 元 素 的 类 名 为 red， 包 含 文 本 为 
全 P| ， “变色 文本 "， 为 该 元 素 绑 定单 击 事件 。 当 单 击 段落 文本 时 ， 使 用 toggleClass0 方法 切换 red 类 样式 ， 实 现 类 
样式 red 的 添加 和 移出 不 断 切换 。 
| $(function(O){ 
| $("<p>", { 
"class": "red", 
text: " 变色 文本 "， 
click: tunction(){ 
$(this).togeleClass("red"): 


， 
妃 .appendIo( body 
1) 
【源码 解析 】 
| 该 接口 的 实现 ， 主 要 是 通过 临时 创建 一 个 元 素 ， 并 将 这 个 元 素 的 innerHTML 属性 设置 为 给 定 的 HIML 
字符 串 ， 从 而 实现 将 HIML 字符 串 转 换 为 DOM 元 素数 组 。 
| 这 部 分 代码 比较 长 ， 因 为 针对 参数 selector 的 字符 串 形式 有 多 种 ， 主 要 包括 : 
| 回 “CSS 选择 器 字符 串 ， 如 "div#box"。 
加 HTML 字符 串 ， 如 "<div>"。 
加 “了 D 标识 待 ， 如 "#box"。 本 来 也 标识 符 也 应 该 属于 CSS 选择 甫 范畴， 但 是 为 了 提高 执行 效率 ，jQuery 
把 了 D 选择 帆 提 前 进行 解析 ， 因 为 它 比 较 简 单 ， 只 要 匹配 出 也 值 ， 使 用 document sgetElementByid 方法 
| 可 以 快速 查找 到 。 
对 于 CSS 选择 器 字符 串 的 处 理 ， 内 部 逻辑 复杂 ， jQuery 使 用 Sizzle 选择 器 引擎 模块 专门 对 其 进行 解析 ， 
”接口 函数 为 fnd0。 第 3 章 将 专门 对 Sizzle 选择 器 引擎 模块 进行 讲解 。 
} else 让 (Icontext || context.jquery) {// 如 果 无 context 人 参数， 或 者 context.jquery 存在 ， 即 context 为 jQuery 对 象 ， 则 
// 在 根 标签 或 jQuery 对 象 范围 查找 CSS 选择 大 匹配 的 DOM 元 素 
return (context || root).find(selector): 
// 相当 于 : $(context).find(expr)， 如 : $("div>p.red", document) 
else 
// a 指 jQuery0， 
// 如 果 在 特定 环境 下 ， 可 能 是 Tween、jQuery.Event 等 
/在 指定 上 下 文中 查找 CSS 选择 器 匹配 的 DOM 元 素 
retum this.constructor(context).find(selector): 


和 
HTML 字符 串 的 解析 过 程 如 下 : 
第 1 步 ， 如 果 selector 表达 式 为 字符 串 ， 则 进入 initO 处 理 图 数 的 第 2 个 条 件 内 进行 处 理 。 
It(typeot selector =——= "strine”) 1 } 
第 2 步 ， 判断 字符 串 是 否 为 HIML 标签 ， 如 果 是 单纯 的 标签 ， 则 不 用 正则 表达 式 进行 匹配 ; 如 果 是 复 
淋 的 HTML 字符 串 片段 ， 则 使 用 正则 表达 式 进行 匹配 。 
It(selector|0| =—= "<" R& 
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selectorlselectorlength - 1 | 一 = "~>" KK 
selector.leneth =>= 3) { 
1/ 则 跳 过 正则 表达 式 检 查 ， 直 接 把 参数 值 传递 给 match 匹配 数组 
match = [null, selector, null|: 
} else { 1/ 使 用 / 八 (?\s*(<PwAWTH)[ 人 庆典 (Pw-]D)$/ 正则 表达 式 对 字符 串 进 行 匹配 
match = rquickExpr.exec(selector): 


} 
第 3 步 ， 对 匹配 结果 match 进行 判断 。 如 果 匹 配 到 标签 ， 或 者 没有 指定 上 下 文 ， 则 考虑 解析 HTML 字 
符 串 ， 或 者 使 用 document.getElementById 方法 找到 指定 ID 元 素 。 


if (match && (match[1] || Icontexb) {} 


第 4 步 ， 在 第 3 步 条 件 内 ， 进 一 步 判 断 match[1] 是 否 存在 ， 如 果 匹 配 到 标签 ， 则 进入 HTML 字符 串 解 
析 流 程 。 | 
第 5 步 , 在 让 (match[1]D){ } 条 件 中 ， 先 使 用 jQuery.parseHTML 方法 把 HIML 字符 串 解 析 为 DOM 元 素 
数组 ， 再 使 用 jQuerymerg 方法 把 它 导 人 当前 jQuery 对 象 中 。 
JQuery.merge(this, JQuery.parseHTML( 
match[1],/HTML 字符 串 
// 如果 context 存在 ， 且 为 DOM 节点 
// 如 果 存 在 contextownerDocument， 则 使 用 它 ， 和 否则 使 用 context 
/ 如果 没 有 指定 context， 则 使 用 document 
context && context.nodeType ? context.ownerDocument || context : document, 
tue /设置 第 3 个 参数 为 tue， 表 示人 允许 解析 script 元 素 
); 


第 6 步 ， 检 测 HIML 字符 串 是 否 为 单个 标签 ， 日 设置 了 第 2 个 参数 为 对 象 直 接 量 。 
1 (rsingleTag.test(match|1|) && JQuery.1sPlamObject(context)) { } 


第 7 步 ， 如 果 为 单 标签 ， 且 设置 了 配置 参数 对 象 ， 则 在 上 一 步 条 件 语句 内 使 用 for 语句 映射 配置 对 象 到 
标签 上 ， 为 其 设置 标签 属性 。 


for (match in context) { /访问 参数 配置 对 象 中 每 个 设置 项 目 
1/ 如果 可 能 ， 上 下 文 的 属性 被 称 为 方法 
1f (JQuery.1sFunction(this[match|)) { 
this[match|(context[match |): 
/ 否则 设置 为 属性 
+ else { 
this.attr(match, context[match|): 
} | 
) | 
第 8 步 ， 如 果 没 有 匹配 到 HTML 标签 ， 且 没有 设置 上 下 文 ， 则 跳 过 HTML 字符 串 解析 ， 进 入 else 分 
支 ， 处 理 ID 选择 器。 | 
}+ else { 
/根据 匹配 到 的 id 属性 值 ， 在 文档 中 直接 找到 这 个 元 素 
elem = document.getElementById(match|2|): 
if (elem) { // 如 果 找 到 这 个 元 素 
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this[0] = elem: // 将 元 素 直 接 封装 到 jQuery 对 象 中 
this.length = 1: // 重 置 length 属性 值 为 1 

} 

return this: /返回 jQuery 对 象 


} 


2.4.3 jQuery(callback) 接口 


jQuery(callback) 实际 上 是 $(document).ready0 的 和 测 写 。 该 接口 允许 用 户 绑 定 一 个 在 DOM 文档 载 人 完成 
后 执行 的 晒 数 。 例如 * 
$(function(){ 
1/ 文档 就 绪 
入 
参数 是 一 个 处 理 滑 数 。ready 事件 处 理 函 数 在 文档 内 容 完 全 载 和 之 后 立即 执行 ， 不 需要 等 待 外 部 链接 的 
文件 是 否 载 人 完成 ， 因 此 啊 应 要 比 load 事件 早 。 
| 【源码 解析 】 
在 jQuery 源码 中 ， 可 以 看 到 initO 初始 化 处 理 消 数 的 第 4 个 条 件 包含 如 下 代码 。 
+ else 1{ (JQuery.1sFunction(selector)) { 
// 如果 存在 ready， 那 么 直接 放 在 $(document).ready0 中 等 待 执行 
return root.ready !=—= undefined ? 
root.ready(selector) : 
// 如 果 不 存在 ready， 则 立即 执行 
/ 提示: 使 用 jQuery 框架 ， 那么 ready 是 存在 的 
selector(]JQuery): 


2.5 jQuery 类 数组 


| 在 jQuery 库 中 ， 有 两 个 概念 特别 需要 初学 者 注意 : 一 个 是 jQuery 类 对 象 ， 另 一 个 是 jQuery 对 象 ， 
jQuery 库 中 所 有 功能 清 数 都 挂 在 这 两 个 对 象 上 ， 而 且 大 部 分 方法 是 一 一 对 应 的 。 


”2.5.1 jQuery 对 象 


无 论 在 何 种 情况 下 ， 调 用 jQuery0 构造 函数 部 将 返回 一 个 jQuery 对象。 注意， 下 面 方法 除外 : 

$(functionO)1{}); 

jQuery 对 象 是 jQuery0 构造 函数 返回 的 this， 这 个 this 指 代 jQuery.prototype， 即 jQuery 原型 对 象 。 实 
际 上 ， 这 个 this 应 该 是 initO 初始 化 处 理 函 数 的 构造 实例 : 


J]Query = function (selector, context) { 
/这 里 使 用 jQueryfn.init0 构造 了 一 个 jQuery 对 象 
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return new JQuery.fn.mit(selector, context): 


} 


然后 ,jQuery 通过 下 面 一 行 代码， 使 用 jQuery.prototype 窗 冀 掉 initprototype， 让 initO 构造 函数 的 实例 
继承 jQuery 的 原型 。 


init.prototype = JQuery.fn:; 


其 中 jQuery.fn 引用 jQuery.prototype。 
在 jQuery.fn.init 国 数 中 ， 最 终 把 匹配 的 DOM 元 素 以 类 数组 的 形式 挂 在 jQuery 对 象 上 ， 形 成 一 个 类 数 
组 形式 。 


2.5.2 构建 类 数组 


类 数组 ( Array-Like ) 是 jQuery 框架 核心 概念 ， 它 描述 了 jQuery 对 象 的 基本 形态 : jQuery 选择 天 能 够 
匹配 一 个 或 多 个 DOM 元 毒 ， 并 把 这 些 元 素 打 包 到 一 个 数据 集合 中 返回 ， 然 后 提供 众多 操作 这 个 数据 集合 
的 方法 。 

如 果 从 数据 结构 角度 分 析 ， 对 象 和 数组 其 实 虱 是 数据 集合 ， 只 不 过 对 象 是 一 个 无 序 集合 ， 数 组 是 一 个 
有 序 集合 。 


var arr = [1,2,3,4]: /数组 结构 
var obj = 1 // 对 和 象 结构 


对 于 数组 来 说 ， 它 有 两 个 主要 特征 : 和 目 惠 有 序 排 列 的 下 标 值 ， 包 含 一 个 length 属性 ， 当 数组 元 素 增 减 
时 ，length 属性 值 会 自动 更 新 ， 反映 变化 后 数组 的 实际 长 度 。 

在 JavaScript 中 ， 存 储 有 序数 据 最 好 的 结构 当然 是 数组 。jQuery 实现 元 素 存 储 最 高 效 的 方法 也 应 该 来 用 
如 下 方式 : 

]Query.fn.prototype=new AITaV(): 

在 this.setArray(arr) 员 数 中 添加 如 下 代码 : 

setArray.apply(this,arr); 


这 样 就 继承 了 数组 的 所 有 特性 ， 并 可 以 在 jQuery 对 象 中 进行 数组 的 功能 扩展 。 但 是 jQuery 并 没有 这 样 
来 实现 对 匹配 元 素 的 打包 ， 它 采用 了 Array-Like 对 象 来 实现 。 

类 数组 实际 上 就 是 对 象 ， 但 是 它 附 加 有 序数 据 寄 存 功 能 ， 结 构 类 似 数 组 。 为 了 模拟 Array 有 序 的 数据 
存储 结构 ，jQuery 采用 人 工 方式 增加 length 属性 ， 并 随时 手动 更 新 length 属性 值 ， 以 确保 其 值 能 够 准确 反 
映 寄 存 数据 的 长 度 ， 同 时 使 用 如 下 有 序 名 称 设置 属性 值 。 


var arr = [1.2.3.4]: /数组 结构 
var obj = { 1/ 对象 结构 
0 :1, 
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可 以 通过 这 种 类 似 数组 的 结构 ， 来 设计 有 序数 据 寄 存 的 功能 。 例 如 ,jQuery 按 如 下 方式 实现 数组 结构 
的 特性 。 
1/ 处理 单个 DOM 元 素 ，$(DOMElement) 
1f (selector.nodelType) { 
this[0| = selector: 
this.length = 1: 
returmn this: 


} 


通过 this[0] 直接 设 定 第 1 个 位 置 的 DOM 元 素 ， 同 时 设 定 length=1。 这 里 可 以 看 出 对 象 与 数组 一 样 都 是 
采用 key/Value 对 的 形式 保存 数据 。 上 面 的 JSON 格式 如 下 : 
{ 
0:1, 
length : 1 
对 于 数组 来 说 ， 使 用 [] 运算 符 解 析 的 结果 与 人 结构 是 一 一 对 应 的 。 使 用 [运算 符 构 建 数 组 时 ， 把 
index 作为 对 象 的 属性 名 ， 如 0、1、2 等 ， 即 key; 把 数组 中 的 值 作为 对 象 中 对 应 的 value; 同时 手动 改变 
length 属性 值 。 因 此 ， 从 数据 绪 构 上 分 析 对 象 与 数组 没有 太 大 的 区 别 。 在 很 多 框架 中 ， 如 YUI， 都 是 采用 对 
象 的 形式 来 构建 类 数组 的 结构 。 
数组 和 对 象 都 可 以 采用 obij[attr] 的 语法 形式 来 取得 其 key 对 应 的 value。 对 于 类 数组 ， 必 须要 求 其 实现 
length 属性 ， 有 了 length 长 度 ， 就 可 以 使 用 循环 语句 实现 太 代 ， 逐 一 读 取 从 0 到 length-1l 的 key 对 应 的 value。 


2.5.3 ”定位 元 素 
在 jQuery 对 象 中 找到 指定 位 置 的 DOM 元 素 ， 可 以 使 用 get0 和 index0 方法 来 实现 。 
< 外 注意 : 类 数组 的 操作 对 象 是 集合 ， 而 与 类 数组 包含 的 DOM 元 素 操作 是 两 个 不 同 的 概念 。 
1. get() 
get0 是 jQuery 对 象 的 方法 ， 用 法 如 下 : 
get(|index|) 
【示例 1】 取 得 指定 下 标 位 置 的 DOM 元 素 ， 从 0 开始 。 


<P> 床 前 明月 光 </P> 

<p> 颖 是 地 上 箱 </p> 

<scrIipt> 

alert($("p").get(0).innerHTML ): /返回 " 床 前 明月 光 " 
</script> 
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如 果 没 有 参数 ， 则 取得 所 有 匹配 的 DOM 元 素 集 合 ， 即 返回 数组 。 
alert($("p").getO[Ol innerHTML ): /1 返回" 床 前 明月 光 " 
【源码 解析 】 


1/ 获取 jQuery 对 象 的 第 n 个 元 素 ， 如 果 没 有 传人 参数 ， 则 返回 所 有 元 素 的 数组 

get: function (num) { | 

/ 返回 一 个 数组 ， 其 中 包含 所 有 元 素 

让 (num = null) { | 
return slice.call(this): /把 jQuery 转换 为 数组 


} 
// 从 集合 中 只 返回 一 个 元 素 
return num < 0 ? this[num + this.length| : this[numl: 


} 


【用 法 比较 】 
使 用 eq(index) 也 可 以 取得 指定 位 置 的 元 素 ， 不 过 它 返 回 jQuery 对 象 ， 而 get0 方法 返回 的 是 DOM | 
alert($("p").eq(0).textO ): 1/ 返回 " 床 前 明月 光 " | 
eq( 方法 的 源 公 如 下 : 
/获取 当前 jQuery 中 第 i 个 位 置 的 元 素 ， 然 后 把 它 转换 为 jQuery 对 象 返回 
eq: function (1) { 
var len = this.length, /获取 jQuery 对 象 长 度 
/如 果 i 为 负数 ， 则 从 右 向 左 定 位 取 值 ; 如 果 i 为 正 数 ， 则 从 左 向 右 定位 取 值 
]=+T+U<07len:0): 
// 如果 j 介 于 length 内 ， 则 取得 DOM 元 率 ， 并 封装 为 数组 ， 否 则 设 为 空 数组 
// 最 后 使 用 pushStack 方法 把 数组 中 元 素 合 并 到 this 对 象 上 ， 即 jQuery 对 象 
return this.pushStack(] >= 0 && ] < len ? [this|]|| : [}]): 
} 


2. Index() 
index0 方法 可 以 搜索 匹配 的 元 素 ， 并 返回 相应 元 素 的 索引 值 ， 从 0 开始 计数 。 用 法 如 下 : 


Index(|selectorlelement|) 


【示例 2】 比 较 index0 方法 的 不 同 用 法 。 


<Ul>> 
<]1d= "ftoo">foo= /> 
<]i1d="bar">bar</]i> 
<]i1d="baz">baz</li> 


</ul> 

<script> 

/ 传递 一 个 DOM 对 象 ， 返回 这 个 对 象 在 原先 集合 中 的 索引 位 置 
$(11").Index(document. es )); /1 

$3(1).index($(#bar’)): /1， 传 递 一 个 jQuery 对 象 
// 传递 一 组 jQuery 对 象 ， 返 回 这 组 对 象 中 第 一 个 元 素 在 原先 集合 中 的 索引 位 置 
3(11).Index($(C11:gt(0)")): /1 
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$(#bar").index(1i"); /1， 传 递 一 个 选择 器 ， 返 回 邦 ar 在 所 有 1 中 的 索引 位 置 
$(t#bar).index0: /1L， 不 传递 参数 ， 返 回 这 个 元 素 在 同 寿 中 的 索引 位 置 
</script> 


【源码 分 析 】 
index0 方法 的 实现 代码 如 下 : 
/可 以 搜索 匹配 的 元 素 ， 并 返回 相应 元 素 的 索引 值 ， 从 0 开始 计数 
Index: function (elem) { 
// 如 果 没 有 参数 ,将 返回 在 父 级 包含 框 中 的 索引 位 置 
1f (lelem) { 
retum (thls|0| && this[01.parentNode) > this.first().prevAl().length : -1: 


} 
// 如 果 为 CSS 选择 天 字 符 串 ， 则 获取 匹配 的 第 1 个 元 素 在 jQuery 对 象 中 的 下 标 位 置 
1{ (typeot elem 一 一 "String") { 

retum mdexOt.call(JQuery(elem), thls|0|): 


lb 

/ 找到 所 需 元 素 的 位 置 

retum indexOt.call(this, elem.jquery ? elem|0| : elem): 
// 如 果 是 jQuery 对 象 , 则 取 第 1 个 元 素 , 否则 直接 使 用 参数 
1/ 获取 其 在 jQuery 对 象 中 的 下 标 位 置 


26 案例 实战 


jQuery 是 在 JavaScript 基础 上 进行 封装 的 ， 因 此 它 的 代码 本 质 上 也 是 JavaScript 代码 。 因 此 ，jQuery 代 
人 码 与 JavaScript 代码 可 以 相互 混合 使 用 。 用 户 不 需要 去 区 分 每 一 行 代码 到 底 是 jQuery 代码 ， 还 是 JavaScript 
代码 。 但 是 ，jQuery 与 JavaScript 是 两 个 不 同 的 概念 ， 在 用 法 上 存在 差异 。 

1. 把 jQuery 对 象 转换 为 DOM 对 和 象 

jQuery 对 象 不 能 使 用 DOM 对 象 的 方法 。 如 果 需 要 使 用 DOM 对 象 的 方法 ， 就 应 该 先 把 jQuery 对 象 转 
换 为 DOM 对象。 转换 的 方法 有 以 下 两 种 。 

(1 ) 信 助 数组 下 标 来 读 取 jQuery 对 和 象 集合 中 的 某 个 DOM 元 素 对 象 。 

【示例 1】 在 下 面 示例 中 ,使 用 jQuery 匹配 文档 中 的 所 有 开元 素 ， 返 回 一 个 jQuery 对 象 ， 然 后 通过 
数组 下 标的 方式 读 取 jQuery 集合 中 的 第 一 个 DOM 元 素 。 此 时 返回 的 是 DOM 对 象 ， 然 后 调用 DOM 属性 
innerHITML ， 读 取 该 元 素 包含 的 文本 信息 。 

<ldoctype html> 

<html> 

<head> 

<meta charset—"utf-8"> 

<script src="Jquery/Jquery-3.1.1.1s" type="text/Javascript"></script> 

<script type="text/Javascript"> 


$(function(){ 
war $li— $"M /返回 jQuery 对 象 
var li =$li[0]: /返回 DOM 对 象 
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alert(li.innerHTML): 

}) 

</script> 

<title></ttle> 

</head> 

<body> 

<Ul>> 
<li> 故人 西 辞 黄 条 楼 ，</i> 
<li> 烟花 三 月 下 扬州 。</li> 
<1i> 孤 帆 远 影 腹 空 尽 ，</li> 
<]i> 叭 见长 江天 际 流 。</> 

</ul> 

</body> 

</html> 


(2 ) 借助 jQuery 对 象 方法 ， 如 get0 方法 ， 为 get0 方法 传递 一 个 下 标 值 ， 即 可 从 jQuery 对 象 中 取出 一 
个 DOM 对 象 元 素 。 | 
【示例 2】 在 下 面 示例 中 ,使 用 jQuery 匹配 文档 中 的 所 有 元 素 ， 返 回 一 个 jQuery 对 象 ， 然 后 通过 | 
jQuery 的 get0 方法 读 取 jQuery 集合 中 的 第 一 个 DOM 元 素 。 此 时 返回 的 是 DOM 对 象 ， 然 后 调用 DOM 属 
性 innerHTMLIL ， 读 取 该 元 素 包含 的 文本 信息 。 


<ldoctype html> 
<html> 
<head> 
<meta charset—"uti-8"> 
<scrlpt src="]Jquery/Jquery-3.1.1.]s" type="text/Javascript"></script> 
<scrlpt type="text/Javascript"> 
$(functionO { 
Var $li= $C"H"): /返回 jQuery 对 象 
var li =$li.get(0): /返回 DOM 对 象 
alert( InnerHITMUL ): 
}) 
</script> 
<title></title> 
</head> 
<body> 
<ul> 
<li> 故人 西 秤 黄 稚 楼 ， 忆 > 
<li> 烟花 三 月 下 扬州 。</li> 
<1li> 孤 帆 远 影 甬 空 尽 ，</li> 
<li> 唯 见长 江天 际 流 。</li> 
</ul> 
</body> 
</html> 


2. 把 DOM 对 和 象 转换 为 jQuery 对 象 

对 于 DOM 对 象 来 说 ， 直 接 把 它 传递 给 $0 函数 即 可 ，jQuery 对 象 会 自动 把 它 包 装 为 jQuery 对 象 , 然 
后 就 可 以 日 由 调用 jQuery 定义 的 方法 。 | 

【示例 3】 针对 上 面 示例 ， 可 以 这 样 来 设计 ;: 使 用 DOM 的 方法 获取 所 有 上 i 元素 ， 然 后 使 用 jQuery0 构造 


。A3。 


函数 把 它 封装 为 jQuery 对 象 ， 这 样 就 可 以 方便 调用 jQuery 对 象 的 方法 。 


| <!doctype html> 
| <html> 
<head> 
<Imeta charset=—"utf-8"> 
<script src="Jquery/Jquery-3.1.1.1s" type="text/Javascript"></script> 
<script type="text/Javascript"> 
$(fimction(){ 
var li= document.getElementsByTagName("li"): 1/ 获取 所 有 li 元 素 
var $1i = $di[0]): // 把 第 一 个 元素 封 装 为 jQuery 对 象 
alert($lihtml0): // 调用 jQuery 对 象 的 方法 


1) 
</script> 
<title></title> 


<1i> 故人 西 辞 黄 稚 楼 ，</li> 
<fi> 烟花 三 月 下 扬州 。</li> 
<li> 孤 帆 远 影 芹 空 尽 ，</li> 
<Ti> 唯 见长 江天 际 流 。</li> 


</ul> 
</body> 

| </html> 

| 实际 上 ,读者 也 可 以 把 DOM 元 素数 组 传递 给 $0 函数 ，jQuery 对 象 会 自动 把 所 有 DOM 元 素 包装 在 一 


个 jQuery 对 象 中 。 
【示例 4】 针 对 上 面 示 例 ， 还 可 以 这 样 设计 。 
<script type="text/Javascript" > 


$(functionO{ 
varl = document.getElementsByTagName("l1"): ”// 获取 所 有 li 元 素 
var $i = $(1i): // 把 所 有 上 二 元 素 封 装 为 jQuery 对 象 
alert($lihtml0): // 调用 jQuery 对 象 的 方法 

}) 

</script> 
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2009 年 1 月 ， jQuery 在 1.3.0 版 本 中 将 CSS 选择 器 代码 拆 分 出 来 进行 封装 ， 命 名 
为 Sizzle， 以 便 独 立 维 护 ， 向 外 开放 ， 雪 时 版 本 为 0.9.1。 

在 jQuery 1.4.0 中 发 布 Sizzle 1.0 版 本 选择 器 引擎 ， 作 为 正式 版 发 布 。2014 年 12 月 ， 
在 jQuery 1.11.2、jQuery 2.1.2 版 本 中 发 布 Sizzle 2.2.0-pre 版 本 ， 从 1.10.19 版 本 直接 升 
级 到 2.2.0;2016 年 1 月 在 jQuery 3.1.0 版 本 中 发 布 Sizzle 2.3.0 版 本 ; 目前 最 新 版 本 为 
Sizzle 2.3.3 版 本 ， 于 2016 年 8 月 发 布 的 jQuery 3.2.1 中 同时 发 布 。 

Sizzle 选择 器 引擎 在 2.2.1 版 本 前 ， 使 用 DOM 2 技术 完成 匹配 任务 ， 而 在 2.2.1 版 
本 中 开始 采用 HTMLS 新 技术 ， 使 用 Selectors API 的 querySelector 和 querySelectorAll 
完成 CSS 选择 器 匹配 任务 ， 同 时 兼容 DOM 2 技术 ， 因 此 Sizzle 源码 结构 和 逻辑 流程 被 
重新 设计 。 本 章 将 以 Sizzle 2.3.3 版 本 的 源码 为 基础 进行 解析 。 


【学 习 重 点 】 

| 了 解 Sizzle 选择 器 引 掌 。 

MH 熟悉 Slzzle 代码 结构 。 

| 熟悉 Slzzle 框架 和 逻辑 结构 。 

| 理解 Sizzle 引 掌 的 运行 逻辑 和 匹配 过 程 。 


Gp ~ zy 以 入 门 到 精通 ( 币 课 精 编 县 ) 


3.1 CSS 选择 器 引擎 历史 


JavaScript CSS 选择 船 从 诞生 距 今 已 有 十 多 年 ， 下 面 简单 梳理 一 下 早期 历史 ， 感 兴趣 的 谈 者 可 以 选择 阅 


读 ， 通 过 了 解 JavaScript CSS 选择 需 的 早期 发 展 历程 ， 以 及 代码 变化 ， 从 最 基础 到 最 近 的 成 熟 ， 能 够 更 深 地 
理解 JavaScript 和 CSS 选择 做 引擎 。 


2003 年 3 月 25 日 ，Simon Willison 编写 了 第 一 个 CSS 选择 大 阴 数 一 一 document.getElementsBySelector()。 
2004 年 4 月 10 日 ，Dean Edwards 发 布 第 一 个 CSS 选择 胡 一 一 CssQueryO 1.0。 

2005 年 8 月 19 日 ，Dean Edwards 发 布 CssQuery0 2.0 版 本 。 

2005 年 8 月 22 日 ，John Resig 发 布 jSelect， 它 是 jQuery 的 前 身 ， 最 早 提出 了 jQuery 的 原型 。 

2006 年 1 月 14 日， jQuery 第 一 个 版 本 发 布 ， 主 要 解决 DOM 选择 问题 ， 并 提供 最 基本 的 DOM 操作 。 
2006 年 1 月 18 日 ，Prototype 框架 出 现 并 流行 ， 这 是 第 一 个 真正 意义 上 的 选择 器 引擎 的 初始 版 本 ， 开 


局 了 人 们 对 JavaScript 深度 探索 的 热情 。 


党 提示 : 关于 上 述 各 个 时 间 节 点 的 事件 地 址 和 源码 链接 ， 感 兴趣 的 读者 可 以 扫 码 查看 。 


2006 年 4 月 4 日 ，moo.dom 出 现 ， 它 是 Mootools 类 库 的 前 身 ， 进 一 步 推 动 了 CSS 选择 需 引 擎 的 发 展 。 
2006 年 8 月 26 日 ,jQuery 1.0 发 布 ，John Resig 对 选择 天 的 结构 做 了 进一步 的 优化 。 
2006 年 11 月 14 日 ，Mochikit Selector 引擎 出 现 ， 它 从 原型 进行 移植 。 

2007 年 1 月 8 日 ,jQuery 1.1a 版 本 发 布 ， 它 的 选择 器 引擎 比 1.0 版 本 快 10 一 20 倍 。 
2007 年 1 月 11 日 ，Jack Slocum 开发 出 DomQuery 选择 嚣 引擎， 主要 供 ExtJs 框架 使 用 。 
2007 年 2 月 5 日 ，dojo.query0 选择 髓 引擎 出 现 ， 主 要 为 dojo 框架 使 用 。 

2007 年 3 月 21 日 ,base2.DOM. 发 布 ， 开 发 了 一 套 独 立 的 选择 器 API。 

2007 年 5 月 1 日 ，Prototype 1.5.1 版 本 发 布 ， 进 一 步 优 化 了 CSS 选择 融 引 擎 。 

2007 年 5 月 7 日 ，Mootools 1.1 版 本 发 布 ， 进 一 步 完 善 了 CSS 选择 器 引擎 。 

2007 年 7 月 1 日 ,jQuery 1.1.3 版 本 发 布 ， 选 择 需 速度 提高 了 800?%6。 

2007 年 7 月 10 日 ，Ext1.1RC1 发 布 。 

2007 年 7 月 10 日 ,Dojo 0.9 发 布 。 

2007 年 12 月 4 日 ,YUI2.4.0 发 布 。 

2007 年 12 月 17 日 ，Diego Perini 开发 出 NWMatcher。 


3.2 Sizzle 引擎 概述 


Sizzle 是 jQuery 的 CSS 选择 需 模 块 ， 同 时 也 是 纯 JavaScript CSS 选择 器 引擎 ， 能 够 方便 用 户 轻松 地 引 


人 各 种 库 中 。Sizzle API 由 以 下 3 部 分 组 成 。 


公共 API: 用 户 与 之 交互 部 分 。 
扩展 API: 用 于 修改 选择 器 引擎 。 
内 部 API: 在 Sizzle 内 部 使 用 。 
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3.2.1 Sizzle 特征 


Sizzle 具有 如 下 特征 : 

完全 独立 ， 不 依赖 任何 库 。 

高 效 运 行 ， 最 常用 的 选择 器具 有 很 强 的 竞争 性 能 。 
非常 小 ， 被 压缩 后 只 有 4KB。 

易于 使 用 ，API 具有 高 度 可 扩展 性 。 

通过 事件 委托 可 以 实现 最 佳 性 能 。 

代码 开源 ， 由 jQuery 基金 会 持 有 所 有 代码， 开放 共享 。 


和 的 多 多 的 的 


3.22 ”Sizzle 选择 器 功能 


Sizzle 选择 融 主 要 功能 如 下 : 

支持 CSS 3 选择 器 。 

支持 完整 的 Unicode。 

支持 转 义 选择 项 ， 如 执 d\value。 

支持 包含 文本 ， 如 :contains(text)。 

支持 复合 选择 器 ， 如 :not :not(a##id)。 

支持 多 重 选 择 ， 如 :not :not(divp)。 

支持 不 包含 属性 值 ， 如 [name!=value]。 

支持 判断 选择 器 ， 如 :has(div)。 

支持 位 置 选 择 般 ， 如 :first、:last、:even、:odd 、:gt、:lt、:eq。 

支持 易 用 表单 选择 絮 ， 如 :mput、:text、:checkbox 、:file 、:password 、:submit、:image 、:Teset、:button 。 | 
支持 标题 选择 器 ， 如 :header。 | 


时 他 凶 多 多 的 的 多 多 多 称 


3.23 ”Sizzle 代码 功能 


Sizzle 代码 具有 如 下 功能 : 

加 ”为 语法 问题 提供 有 意义 的 错误 消息 。 
加 ”使 用 单个 代码 路 径 ， 不 用 XPath。 

加 ”不 再 使 用 浏览 右 探 测 。 

加 ”Caja 兼容 代码 。 


3.2.4 Sizzle 参考 
Sizzle 官网 : https://sizzlejs.com/。 
Sizzle 文档 : https://github.conyjquery/sizzle/wiki。 


GitHub 项 目 ( 源 代码 ): https://github.conyjquery/sizzle/tree/master。 
Sizzle 讨论 组 : http://eroups.google.comy/eroup/sizzlejs。 
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”3.2.5 浏览 器 支持 


名 ” 果 面 
> Chrome 16+ 

> Edge 12+ 

> Firefox 3.6+ 

> Internet Explorer 7+ 

> 

> 


Opera 11.6+ 
| Safari 4.0+ 
0 注意 : 独立 Sizzle 和 包含 Sizzle 的 库 之 间 ， 浏 览 器 支持 可 能 会 有 所 不 同 。 
| Internet Explorer 6 的 解决 方案 仍 在 代码 中 ， 但 浏览 器 不 再 被 主动 测试 。 


加” 移动 
> Android 2.3+ 
> 10S 5.1+ 


”3.2.6 Sizzle 选择 器 


Sizzle 支持 几乎 所 有 的 CSS 3 选择 器 ， 包 括 转 义 的 选择 器 ( 如 foovbar )、Unicode 选择 器 和 以 文档 顺序 
返回 的 结果 。 但 是 ,不 支持 以 下 CSS 伪 选 择 需 : 
| MM :hover 
| 四 :active 
四 :Vislted 
MM link 
因为 需要 额外 的 DOM 事件 监听 融 来 跟踪 元 素 的 状态 。 
而 下 面 这 些 CSS 3 伪 选 择 器 在 Sizzle 1.9 版 本 之 前 不 被 支持 : 


:target 

:TOoft 

-nth-last-child 

-nth-of-type 、:nth-last-of-type 、:first-of-type 、:last-of-type 、:only-of-type 
-lang() 


除了 CSS 3 选择 器 外 ，Sizzle 又 增加 了 其 他 选择 器 ， 具 体 说 明 如 下 : 

notO 完全 选择 列表 : :not(ab)、:not(div > p)、:not(div, p)。 

舱 套 伪 选 择 靛 : :not(:has(div:first-child))。 

[INAME!=VALUE]: 匹配 NAME 属性 与 指定 值 不 匹配 的 元 素 ， 相 当 于 :not(INAME=VALUE])。 
:contains(TEXT): 含有 textContent 的 元 素 ， 包 含 单 词 'TEXT'"， 区 分 大 小 写 。 

:header: 标题 元 素 ， 包括 hl、h2、h3、h4、h5 和 ho6 元 素 。 

:parent: 包含 至 少 有 一 个 子 节 点 ( 文本 或 元 素 ) 的 元 素 。 

:selected: 当前 选择 的 元 素 。 

添加 的 表单 选择 融 说 明 如 下 : 


内因 办 办 办 办 办 深 因 办 因 内 内 


。 48 。 


第 3 章 解析 Sizz[e 选 择 器 引 学 


加 :input: 输入 元 素 。 
回 :button: 输入 元 素 是 按钮 ， 或 type="button" 的 按钮 。 
回 :checkbox 、:file、:image、:password 、:Tadio 、:reset、:submit、:text: 有 具有 指定 类 型 的 输入 元 素 。 


< 人 注意 : input、button、select 和 textarea 都 被 认为 是 输入 元 素 。 


添加 的 位 置 选择 天 说 明 如 下 : 

回 :first、:last: 第 一 个 或 最 后 一 个 匹配 元 素 。 

町 :even、:odd: 偶数 或 奇数 元 素 。 

町 :eq、:nth: 第 1n 个 元素 ， 如 :eq(5) 匹配 第 6 个 元 素 。 
回 :lt、:gt: 位 于 指定 位 置 上 方 或 下 方 的 元 素 。 


< 钊 注意 : 位 置 索 引 从 0 开始 。 在 这 种 情况 下 ， 位 置 是 指 在 选择 之 后 ， 基 于 文档 顺序 的 元 素 在 集合 中 的 位 | 
置 。 例如，div:first， 首 先 返 回 在 页 面 中 包含 第 一 个 div 的 数组 ， 而 div:first em 将 定位 到 页 面 上 
的 第 一 个 div， 然 后 选择 所 有 em 元 素 。 


3.2.7 公共 API 


下 面 是 Sizzle 选择 天 引擎 主要 公共 困 数 。 

1. Sizzle() 

Sizzle0 是 Sizzle 查找 元 素 的 主要 图 数 。 语 法 格式 如 下 : 
Slzzle( String selector|, DOMNode context|, Array results|| ) 


加 ”selector: 一 个 CSS 选择 髓 ， 字 符 串 类 型 。 
加 ”context: 指定 查找 范围 的 上 下 文 元 素 ， 如 文档 或 文档 片段 。 默 认为 文档 。 注 意 ,在 2.1 版 本 之 前 ， 
不 支持 文档 片段 。 
四 results: 附加 查找 结果 的 数组 ， 或 类 似 数 组 的 对 象 ( 如 jQuery )。 
该 图 数 先 判 断 浏 览 顺 是 否 文 持 querySelectorAll。 如 果 支 持 querySelectorAll， 则 优先 使 用 querySelectorAll; 
否则 使 用 传统 方法 进行 匹配 。 最 后 返回 一 个 数组 ,包含 与 选择 融 匹 配 的 所 有 元 素 。 
2. Slzzle.matchesSelector() 


Sizzle.matchesSelector( 判断 给 定 元 素 是 否 与 选择 天 匹配 。 语 法 格式 如 下 : 


Slzzle.matchesSelector( DOMElement element, String selector ) 


回 element: 一 个 DOM 元 素 ，Sizzle 将 测试 选择 器 的 DOMElement。 | 

回 selector: 一 个 CSS 选择 右 ， 字 符 品 类 型 。 | 

该 明 数 使 用 本 地 哺 数 matchesSelector ( 如 果 可 用 ) 进行 检测 ， 最 后 返回 一 个 布尔 值 ， 如 果 匹 配 则 返回 
true， 否 则 返回 false。 

3. Slzzle.matches() 

Sizzle.matches0 根据 给 定 的 选择 占 ， 返 回 匹 配 元 素 。 语 法 格式 如 下 : 

Slzzle.matches( String selector, AIray<DOMElement> elements ) 
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参数 说 明 如 下 : 

回 selector: 一 个 CSS 选择 右 ， 字 符 串 类 型 。 

加 ”elements: 使 用 指定 选择 占 进 行 过 滤 的 DOMElement 数组 。 
最 后 返回 一 个 数组 ， 数 组 中 包含 与 给 定 选 择 需 匹配 的 元 素 。 


”3.2.8 扩展 API 


在 Sizzle 中 , Sizzle.selectors match NAME = RegExp 包含 了 用 于 将 选择 器 解析 为 不 同 部 分 的 正则 表达 式 ， 
| 用 于 查找 和 过 滤 。 每 个 正则 表达 式 的 名 称 应 对 应 于 Sizzle.selectors.find 和 Sizzle.selectors.filter 对 象 中 指定 的 
”名 称 。 

| 1， 查 找 

为 了 添加 一 个 新 的 查找 函数 : 

回 ”必须 将 正则 表达 式 添 加 到 匹配 对 象 中 。 

回 ”必须 定义 一 个 查找 图 数 。 

“| ”+NAME 必须 附加 到 Sizzle.selectors.order 正则 表达 式 ， 代 码 如 下 : 


Slizzle.selectors.find.NAME = function( match, context, 1SXML ) {} 


这 是 一 个 在 页 面 上 查找 某 些 元 素 的 图 数 。 每 个 选择 融 将 指定 的 图 数 不 超 过 一 次 。 

该 晒 数 的 参数 说 明 如 下 : 

回 match: 是 从 指定 的 正则 表达 式 与 选择 天 匹配 返回 的 结果 数组 。 

回 ”context: 指定 查找 的 范围 ， 即 上 上 下文 DOMElement 或 DOMDocument。 

回 isXML: 布尔 值 ， 设 置 当前 图 数 是 否 在 XML 文档 中 运行 。 

为 了 添加 一 个 新 的 过 滤 语句 : 

回 ”必须 将 正则 表达 式 添 加 到 匹配 对 象 中 。 

加” 一 个 国 数 必须 添加 到 过 滤 天 对 象 。 

回 可 以 将 一 个 国 数 添加 到 preFilter 对 象 ( 可 选 )。 代 码 如 下 : 

Silzzle.selectors.preFilter.NAME = function( match ) {+ 
| 这 是 一 个 可 选 的 预 过 滤 需 果 数 ， 人 允许 根据 相应 的 正则 表达 式 过 滤 匹 配 的 数组 ， 这 将 返回 一 个 新 的 匹配 
数组 。 这 个 匹配 的 数组 最 终 将 被 传递 给 过 滤器 函数 。 这 是 为 了 清理 在 过 滤器 函数 中 发 生 的 一 些 重复 处 理 。 
| Slzzle.selectors.filter. NAME: function( element match| 1|[, match|[2], match|[3],…:| ) 二 


< 角 注意 ; match[0] 被 传递 到 过 滤器 之 前 将 被 删除 ， 不 能 使 用 。 


过 滤 方 法 的 参数 是 元 素 和 来 自 正 则 表达 式 的 捕获 对 应 于 此 过 滤 需 (上面 由 匹配 中 指出 的 ， 从 索引 1 开 
。 始 ) 返回 结果 必须 为 布尔 值 : 如 果 元 素 与 选择 器 匹配 ， 则 返回 tue， 否 则 返回 false。 
| 3.， 属性 


Silzzle.selectors.attrHandle.LOWERCASE NAME = function(elem, casePreservedName, 1sSXML) 1{} 
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处 理 需 要 专门 处 理 的 属性 ， 如 有 具有 跨 浏 览 冀 问题 的 href。 返回 结果 必须 是 该 属性 的 实际 字符 串 值 。 
4. 伪 选 择 兹 
Slzzle.selectors.pseudos.NAME = function( elem ) 全 


选择 器 引擎 最 常见 的 扩展 : 添加 一 个 新 的 伪 类 。 此 函数 的 返回 结果 必须 为 布尔 值 : 如 果 元 素 与 选择 器 匹 
配 ， 则 返回 tue， 和 否则 返回 false。 
【示例 1】 这 定义 了 一 个 简单 的 fixed 伪 类 。 
Var $test = JQuery( document ): 
Slzzle.selectors.pseudos.fixed = function( elem ) { 
$test| 0 ] = elem: 
return $test.css( "position" ) 一 一 "fxXed'": 


$s 
当 自 定义 伪 选 择 髓 接收 参数 时 ， 才 需要 使 用 createPseudo(function) 函数 。 
Slzzle.selectors.createPseudo(function) 


< 秀 注意 : 在 jQuery 1.8 及 更 早 版 本 中 ， 用 于 创建 具有 参数 的 自 定义 伪 类 的 API 已 被 破坏 。 在 jQuery 1.8.1+ | 
中 ，API 向 后 兼容 。 无 论 如 何 ， 鼓 励 使 用 createPseudo0 函数 。 | 


解析 天 编译 包含 其 他 函数 的 单个 图 数 ， 具 有 参数 的 自 定 义 伪 选择 器 更 清晰 。 
【示例 2】 在 Sizzle 中 ， 执 行 :not( <sub-selector> ) 伪 类 类 似 如 下 代码 。 


Slzzle.selectors.pseudos.not = 
Slzzle.selectors.createPseudo(ftunction( subSelector ) { 
Var matcher = Silzzle.compile( subSelector ): 
return function( elem ) { 
return Imatcher( elem ): 
1, 
1): 
为 了 编写 具有 可 以 利用 新 API 的 参数 的 自 定义 选择 器 ， 但 仍 支持 所 有 版 本 的 Sizzle， 请 检查 createPseudo0 
函数 。 | 
【示例 3】 以 下 示例 使 用 jQuery 语法 。 | 
// 不 区 分 大 小 写 的 实现 包含 伪 类 
/适用 所 有 版 本 的 jQuery 
(function( $ ) { 
function icontains( elem, text ) { 
return ( 
elem.textContent || 


elem.mnerText || 


$( elem ).textO || 
).toLowerCase().mndexOf( (text | "").toLowerCase() ) > -1: 


} 


$.expr.pseudos.icontains = $.expr.createPseudo ? 


es bi1|* 


zy 以 入 门 到 精通 ( 币 课 精 编 肘 ) 


$.expr.createPseudo(function( text ) { 
retum function( elem ) { 
Tetum icontains( elem, text ): 


| FE 


\ | function( elem, i, match ) { 
return icontains( elem, match[3] ): 
| PF 
D(JQuery ); 


| 这 些 过 滤 问 在 选择 带 的 上 一 部 分 已 经 返回 结果 之 后 运行 。setFilters 从 匹配 的 Sizzle.selectors.match.POS 
| 中 找到 。 使 用 时 ， 参 数 预 计 为 整数 。not 参数 是 一 个 布尔 值 ， 表 示 结 果 是 否 应 该 反 转 ( 如 div:not(:first) )。 
| 【示例 4】 第 一 个 setFilter 的 代码 类 。 
var first = function( elements, areument, not ) { 
/No areument tor first 
retum not > elements.slice( 1 ) : | elements|0|] |: 
和 
Slzzle.selectors.setFilters.first = first: 


很 容易 扩展 Sizzle， 甚 至 Sizzle 的 POS 选择 右 。 例 如 ， 要 重 命 名“:first” 为 “:uno”。 


Slizzle.selectors.match.POS = new RegExp( oldPOS.source.replace( "tirst", "uno"), "gl1" ): 
Slzzle.selectors.setFilters.uno = Sizzle.selectors.setFlilters.first: 

delete Silzzle.selectors.setFilters.first: 

Sizzle("div:uno"): /一 > [ <div> ] 


”3.2.9 内 部 API 


一 般 功 能 应 通过 公共 API 和 扩展 API 访问 ， 内 部 API 专门 用 于 内 部 使 用 。 

| Sizzle 内 部 缓存 编译 的 选择 器 函数 和 标记 化 对 象 。 这 些 缓存 的 长 度 默认 为 0, 但 可 以 通过 分 配给 此 属 
性 设置 为 任何 正 整数 。 

Slzzle.selectors.cacheLeneth 


下 面 编译 一 个 选择 器 函数 并 缓存 它 以 供 以 后 使 用 。 例 如 ， 在 插件 初始 化 期 间 调用 Sizzle compile(" myWidget 
myPseudo") 将 加 快 匹 配 元 素 的 第 一 选择 。 


| Slzzle.complle( selector ) 
”参数 selector 表示 一 个 CSS 选择 器 。 最 后 返回 一 个 函数 ， 即 在 过 滤 可 能 匹配 元 素 的 集合 时 使 用 的 编译 
也 | 数 a 


”3.2.10 ”Sizzle 代码 结构 


Sizzle0 构造 图 数 包 含 了 三 十 多 个 私有 上 盟 数 ，Sizzle 引擎 正 是 通过 这 些 功能 函数 完成 CSS 选择 天 字符 串 
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的 分 拒 、 匹 配 、 过 滤 等 操作 ， 最 终 从 文档 中 找 出 匹配 的 DOM 元 素 ， 并 返回 这 些 元 素 。 下 面 是 jQuery 框架 | 
中 般 入 的 Sizzle 代码 ， 主 要 结构 如 下 : 


var Slzzle = (function (window) { 
/1.Sizzle 因数 ， 获 得 匹配 的 结果 集 
function Sizzle(selector, conteXt results, seed) { 
/2. 创建 有 限 大 小 的 键 值 缓存 
function createCache() { }; 
/3. 标记 函数 
function markFunction(fn) { }: 
//4. 测试 函数 血 传人 DOM 元 素 div 的 返回 值 
function assert(fn) { }: 
/115. 给 所 有 属性 添加 相同 的 处 理 程序 
function addHandle(attrs, handler) { :: 
/6. 检查 a、b 先后 顺序 
function siblingCheck(a.b) { }: 
/17. 返回 一 个 检测 elem 是 input 类 型 日 type 属性 为 指定 的 type 的 函数 
function createInputPseudo(type) { }:; 
//8. 返回 一 个 检测 节点 名 是 input 或 button， 且 type 属性 是 指定 的 type 的 函数 
function createButtonPseudo(type) { 
/9. 返回 一 个 函数 ， 用 于 :enabled/:disabled 伪 类 
function createDisabledPseudo(disabled) { }: 


function createPositionalPseudo(fn) { :: 

/111. 在 Sizzle 上 下 文中 检查 节点 有 效 性 

function testContext(context) { }: 

/112. 为 了 方便 ， 公开 文 持 的 变量 

support = Sizzle.support = {}: 

/13. 检测 XML 节点 

isXML = Sizzle.isXML = function (elem) { }: 

//14.Sizzle 的 setDocument 图 数 ， 根 据 当 前 文档 设置 文档 相关 的 变量 ， 参 数 为 element 或 document， 返 回 current 
document | 

setDocument = Slzzle.setDocument = function (node) { }: | 

/115. 检查 多 个 元 素 匹 配 expr 的 部 分 

Sizzle.matches = function (expr, elements) { }: 

/16. 便捷 方法 ， 检 查 某 个 元 素 node 是 否 匹 配 选 择 器 表达 式 expr 

S1zzle.matchesSelector = function (elem, expr) { }: 

/17. 检查 包含 关系 ,调用 setDocument 函数 中 定义 的 contains 函数 

Slzzle.contains = function (context., elem) { }: 

/18. 工具 盟 数 ， 属 性 处 理 

Slizzle.attr = function (elem, name) { }: 

/19. 工具 肯 数 ， 转 义 选 择 融 字符 串 

Sizzle.escape = function (Sel) { }: 

/20. 工具 函数 ， 抛 出 异常 

Sizzle.error = function (mse) { 

/21. 工具 方法 ， 排 序 、 去 重 

Sizzle.uniqueSort = function (results) { }: 

/22. 工具 方法 ， 获 取 DOM 元 素 集 合 的 文本 内 容 

getText = Sizzle.getText = function (elem) { }: 

/23.Expr 对 象 ，Sizzle.selectors 对 象 的 定义 

Expr = Sizzle.selectors = { }; 


和 
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/nth 与 eq 相同 的 过 滤 函 数 

Expr.pseudos|"nth"| = Expr.pseudos|["eq"|: 

| //Easy API 用 于 创建 新 的 setFilters 

function setFilters() 他 

| setF1ilters.prototype = Expr.1ilters = Expr.pseudos.: 


| Expr.setFilters = new setFilters(); 

/24. 解析 器 ， 用 于 词法 解析 ， 分 解 选择 器 字符 串 
tokenize = Sizzle.tokenize = function (Selector parseOnly) { }: 
| //25.tokens 转换 为 selector 


function toSelector(tokens) { 

//26. 生成 关系 选择 符 过 滤 晴 数 

| tunction addCombmator(matcher, combmator, base) { } 

| //27.matchers 为 数组 的 情况 ， 返 回 过 滤 函 数 

function elementMatcher(matchers) { } 

/28. 多 个 上 下 文 的 情况 ， 对 每 个 上 下 文 调用 Sizzle， 合 并 结果 

function multipleContexts(selector, contexts, results) 人 } 

| /29. 根据 filter 缩小 unmatched 范围 ， 保 留 map 对 应 

| function condense(unmatched, map, filter, context, xml) { } 

| //30. 设置 匹配 处 理 陆 数 ， 和 参数 有 预 过 滤 阴 数 、 选 择 带 、matcher 阴 数 、 后 置 过 滤 函 数 、 后 置 查找 时 数 和 后 置 
| function setMatcher(preFllter, selector, matcher, postFilter, postFinder, postSelector) { } 
/31. 通过 解析 的 selector 来 获得 对 应 的 过 滤 了 负数 

functon matcherFromlokens(tokens) {} 

| //32. 多 个 elementMatcher 和 和 多 个 setMatcher 的 情况 下 ， 返 回 superMatcher 

| function matcherFromGroupMatchers(elementMatchers, setMatchers) {} 

| //33. 编译 函数 机 制 

| complle = Silzzle.compile = function (selector, match) { } 

| //34.Sizzle 编译 选择 器 功能 的 低级 选择 功能 ， 是 Sizzle 引擎 的 主要 入 口 函 数 

select = Silzzle.select = function (Selector context, results, seed) { }; 


| return Sizzle: 
})(Window); 


3.3 使 用 Sizzle 引擎 
本 节 将 简单 介绍 Sizzle 引擎 的 安装 和 使 用 ， 同 时 了 解 其 基本 工作 流程 。 


3.3.1 安 少 Sizzle 


下 面 演示 在 网 页 中 安 站 Sizzle 引擎 。 
| 第 1 步 ， 访问 Sizzle 官网 (https:/sizzlejs.comy )， 下 载 Sizzle 引 敬 压缩 包 。 


『 
Wi 


| 这 提示 : 或 者 访问 https://github.com/jquery/sizzle 下 载 .。 


第 2 步 ， 在 网 页 头 部 区 域 导 人 sizzle.js 库 文件 。 
<script src="slzzle/sizzle.]s"></script> 
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第 3 步 ， 在 页 面 主体 区 域 输入 下 面 HTML 代码 和 JavaScript 脚本 。 
<P> 床 前 明月 光 </P> 

<p> 疑 是 地 上 和 祖 </p> 

<script> 

console.dir(Sizzle("p") ); 

</scrlpt> 


第 4 步 ， 使 用 Chrome 浏览 器 查看 页 面 ， 在 控制 台 ( 按 Fl2 键 ) 中 可 以 看 到 Sizzle 匹配 两 个 DOM 元 素 ， 
以 数组 的 形式 返回 ， 如 图 3.1 所 示 。 


:A 


¥ | Flter| LC | 
| 
本 中 Prawf 1) 


图 3.1 使 用 Sizzle 匹配 元 素 | 


3.3.2 骨 入 jQuery | 


在 默认 状态 下 ,jQuery 内 置 了 Sizzle 引擎 。 用 户 和 直接 使 用 jQuery0 即 可 调用 Sizzle。 主 要 代码 如 下 : 


var Slzzle = 
(function (Window) { 


return Sizzle: | 
))(windov: 

jQuery.find = Sizzle: 
]Query.expr = Slzzle.selectors:; 
]Query.uniqueSort = JQuery.unique = Sizzle.uniqueSort: 
jQuery.text = Sizzle.getText: | 
jQuery.isXMLDoc = Sizzle.isXML.; | 
]Query.contains = Sizzle.contains: | 
]Query.escapeSelector = S1zzle.escape: 


在 jQuery 库 中 ， 把 Sizzle 引擎 传递 给 变量 Sizzle， 然 后 再 把 内 部 主要 接口 回 jQuery 开放 ， 实 现 无 颖 
对 接 。 


3.3.3 jQuery 与 Sizzle 协作 


下 面 以 一 个 简单 示例 演示 jQuery 与 Sizzle 是 如 何 协同 操作 的 ， 从 而 达到 在 jQuery 中 调用 Sizzle， 并 获 
取 一 个 符合 条 件 的 jQuery 对 象 。 


s 门口 。 


2 和 入门 到 精通 ( 币 课 精 编 县 


第 1 步 ， 新 建 页 面 ， 导 人 jQuery 库 文件 。 然 后 ， 构 建 如 下 示例 代码 。 


<SCcIIpt src="Jquery/Jquery-3.2.1.]s"></script> 

<P> 床 前 明月 光 </P> 

<p> 疑 是 地 上 箱 </p> 

<script> 

console.dir(JQuery("p") ); 

</script> 

第 2 步 ， 在 Firefox 浏览 占 中 先 查 看 一 下 结果 ， 按 Fl12 键 ,可 以 在 控制 台 显 示 匹 配 的 集合 ， 如 图 3.2 
所 示 。 


UscrsiB/ Documents mate 惰 


后 > Q 会 | D pp a 全 | 为 = 


[4 百 硬 ; 控制 - 调研 梓 芭 性 朋 内 存 网 绍 存 全 田 " 轩 日 密 日 四 XX 
[1 椅 渗 日 志 


testl1,.html :1 :1 


床 前 明月 光 


prewOoject: Object [ HTMLOocumert 
Filesiric: /Users/,B/Documents/u ytest}l, html 


图 3.2 ”使 用 jQuery 匹配 元 素 


< 秀 注意 : 这 里 的 匹配 集合 是 一 个 jQuery 对 象 ， 也 就 是 一 个 普通 对 象 ， 与 Sizzle 引擎 直接 返回 的 数据 集合 
是 不 同 的 ，Sizzle 直接 返回 的 是 一 个 数组 ， 而 不 是 一 个 对 人 象 。 


第 3 步 , 把 "p" 传人 jQuery0 之 后 ， 又 被 传 给 了 initO 函数 ， 过 程 如 下 : 


/ 传人 : 
]Query = function (selector, context) { 
return new jQuery.fn.mit(selector, context); 


} 
/ 再 传 给 : 
nit = JQuery.fn.mit = function (Selector context, root){ } 


第 4 步 ， 在 init0 函数 内 对 字符 串 selector 进行 处 理 ， 如 果 是 CSS 选择 器 字符 串 ， 则 再 传 给 fnd0。 代 
但 如 下 : 
} else 1f (lcontext || context.Jquery) { 
return (context || root).find(selector): 
+ else { 
return this.constructor(context).find(selector): 


} 
第 $ 步 ， 根 据 上 下 文 的 不 同 ， 最 后 都 调用 jQuery 对 象 的 fmnd0 方法 。find0 方法 的 源码 如 下 : 
]Quervy.fn.extend({ 
find: function (selector) {// 在 已 生成 的 DOM 中 按照 selector 查找 对 应 元 素 
Var 1, ret. 


s 门口 。 
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len = this.leneth, 
self = this: 
1{ (typeot selector ‘=—— "strine") { 
//jQuery(selector) 调用 filter0 方法 ， 获 得 符合 条 件 的 新 jQuery 对 象 
return this.pushStack(JQuery(selector).filter(ftunction () { 
for (1= 0:;1< len:;1t+) { 

// 裔 历 self 中 的 每 个 元 素 ， 看 看 其 中 是 否 有 this， 如 果 有 则 返回 true 
/selffi] 是 祖先 ，this 是 被 检测 的 元 素 
lf (JQuery.contams(selfli], this)) + 


return true: 
} 
} 
上 
} 
ret = this.pushStack([]): /selector 拼接 一 下 ， 然 后 添加 的 elem 是 空 
for (i=0:i<len:itt) { /this 是 调用 find0 的 jQuery 对 象 ，ret 是 全 局 jQuery 对 和 象 


jQuery.find(selector, self[i], reb: // 调用 Sizzle， 把 结果 放 到 ret 里 
/根据 selector， 把 self[i] 中 符合 selector 的 结果 放 到 ret 里 面 


} 
// 如 果 匹 配 多 个 元 素 ， 则 调用 jQueryuniqueSort 进行 去 重 ， 最 后 返回 最 终结 果 rect 
retum len > 1 ? JQuery.uniqueSort(ret) : ret: 


} 


在 上 面 代码 中 ， 如 果 selector 不 是 stimg， 则 调用 jQuery 的 fter0 方法 ， 过 滤 的 条 件 是 一 个 function， 


其 中 调用 了 contains0 方法 。 
第 6 步 ， 在 find0 方法 中 ,调用 jQuery.find0 执行 Sizzle 选择 如 引 擎 。 


jQuery.find(selector selffil. ret) 


第 7 步 ，jQuery.find 正 引 用 了 Sizzle， 从 而 完成 jQuery 选择 侣 工作 流程 ， 代 人 码 如 下 : 
J]Query.find = Sizzle:; 

3.4 词法 分 析 
下 面 从 浏览 副 的 词法 分 析 开 妈 ， 来 探究 Sizzle 选择 天 引擎 的 设计 原理 。 


3.4.1 浏览 颖 解析 概述 


网 页 从 加 载 到 显示 是 一 个 复杂 的 过 程 ， 主 要 包含 两 个 阶段 : 重 绘 和 重 排 。 各 浏览 副 引 擎 的 工作 原理 虽 略 


有 不 同 , 但 基本 规则 都 是 一 样 的 。 
第 1 步 ， 当 文档 初次 加 载 时 ， 引 擎 会 解析 HTML 文档 ， 构 建 DOM 树 。 
第 2 步 ， 根 据 DOM 元 素 的 几何 属性 ， 构 建 一 个 用 于 泻 染 的 树 。 
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便 ' 提示 : 泻 染 树 的 每 个 节点 都 有 大 小 和 边 距 等 属性 ， 即 CSS 使 模 型 。 由 于 隐藏 元 素 不 需要 显示 ， 泻 染 树 
中 不 包含 DOM 树 中 隐藏 的 元 素 。 


第 3 步 ， 当 构建 完 演 染 树 ， 浏览 副 就 将 元 素 放 置 到 正确 的 位 置 ， 再 根据 演 染 树 节点 的 样式 属性 在 页 面 
中 进行 绘制 。 


党 提示 : 在 默认 情况 下 ， 浏 览 器 采用 流 布局 ， 对 演 染 树 的 计算 通常 只 需 遍 历 一 次 就 可 以 完成 。 


【示例 1】 一 个 简单 的 HIML 文档 解析 成 DOM 树 后 ， 结 构 如 下 : 
<dlv 1d= "text > 
<p> 
<input type="text" /> 
<p> 
<div class="sub"> 
<Input type="checkbox" name="me" /> 
<p>S1lzzle</p> 
</div> 
</div> 


如 有 果 想 要 操作 其 中 的 checkbox ， 需 要 有 一 种 表达 方式 ， 使 得 通过 这 个 表达 式 让 浏览 希 知 道 要 操作 的 下 
点 。 这 个 表达 式 就 是 CSS 选择 枯 ， 它 可 以 这 样 表示 : 
dv>p+.sub mput[type="checkbox"| 


简单 描述 就 是 ， 在 div 子 元 素 中 找到 p， 有 再 找到 它 的 相 邻 兄弟 节点 ， 贡 点 的 class 为 sb， 然后 在 它 的 后 
代 元 素 中 找 input 元 素 ， 且 其 属性 type 为 checkbox。 

使 用 CSS 3 的 读者 都 应 该 知道 ，CSS 3 选择 需 的 类 型 是 非常 多 的 ， 其 组合 形式 也 是 千变万化 。 但 是 对 
于 JavaScript 引擎 来 说 ， 最 终 都 会 通过 下 述 接口 来 实现 查找 。 


document.getElementByld /根据 ID 值 获取 DOM 节点 
document.getElementsByTagName / 根据 标签 名 获取 DOM 节点 
document.getElementsByName /根据 属性 name 值 获取 DOM 节点 
另外 ， 高 级 浏览 大 还 提供 下 述 接口 : 

document.getElementsByClassName 1/ 根据 class 值 获取 DOM 节点 
document.querySelector /根据 CSS 选择 器 字符 串 获 取 节 点 
document.querySelectorAll /根据 CSS 选择 需 字 符 串 获取 节点 


由 于 低级 浏览 器 未 提供 这 些 高 级 接口 ， 所 以 才 催 生 了 Sizzle CSS 选择 器 引擎 。Sizzle 引擎 提供 的 接口 与 
document.querySelectorAll 是 一 样 的 ， 都 是 根据 CSS 选择 青 字 符 串 匹配 符合 规则 的 DOM 市 点 列表 ， 因 此 首 
【示例 2】 在 页 面 中 设计 4 段 文 本 ， 然 后 引入 Sizzle 引擎 ， 输 入 下 面 JavaScript 脚本 ， 使 用 浏览 凯 查 看 ， 
在 控制 台 可 以 看 到 相同 的 查询 结果 ， 如 图 3.3 所 示 。 
<script src="sizzle/sizzle.]s"></script> 
<div> 
<div class="sub"> 
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<p> <span>sl1</span></Pp> 
<p><span>s2</span></p> 
<p><span>s3</span> </Pp> 
<p><span class=Tred'>s4</span></Pp> 
</div> 
</div> 
<script> 
window.onload = function () { 
console.log(Slzzle('div > div.sub p span.red")) 
console.log(document.querySelectorAll('div > div.sub p span.red'")) 
} 


</ScTIDt 


图 3.3 使 用 Sizzle 和 querySelectorAll 分 别 查 询 span 元 素 


使 用 Sizzle 查询 的 结果 为 一 个 Array， 包 含 一 个 元 素 ， 为 <span class=Ted>; 使 用 querySelectorAll 查询 
的 结果 为 NodeList， 包 含 一 个 元 素 ， 为 <span class=Ted>。 虽 然 返 回 数据 类 型 不 同 ， 一 个 是 数组 ， 另 一 个 是 
类 数组 ， 但 是 它们 都 是 数据 集合 ， 可 以 相互 转换 。 


3.4.2 CSS 选择 器 解析 顺序 


HTML 经 过 解析 后 ， 生 成 DOM 树 ; 在 CSS 解析 后 ， 将 解析 结果 与 DOM 树 进行 分 析 ， 建 立 演 染 树 ， 最 
后 在 页 面 上 绘图 。 

泻 染 树 中 的 元 系 与 DOM 树 中 的 元 素 相 对 应 ， 但 不 是 一 一 对 应 : 一 个 DOM 元 系 可 能 会 对 应 多 个 演 染 树 
中 的 元 素 。 例 如 ， 文 本 折 行 后 ， 不 同 的 行 会 成 为 章光 树 中 不 同 的 元 素 ; 也 有 DOM 元 素 被 泻 染 树 忽 略 ， 如 
display:none 的 元 素 。 

在 建立 浑 染 树 时 ， 浏 览 融 根据 CSS 的 解析 结果 ， 要 为 每 个 DOM 元 素 确 定 生 成 怎样 的 泻 当 元素。 对 于 
每 个 DOM 元 素 ， 必 须 在 所 有 样式 规则 中 找到 符合 的 CSS 选择 器 ， 并 将 对 应 的 规则 进行 合并 层 琶 。CSS 选 
择 需 的 解析 实际 上 就 是 在 这 里 执行 的 。 在 遍 历 DOM 树 时 ， 从 样式 规则 中 查找 对 应 的 这 染 元 率 。 

在 HIML 文档 中 ， 样 式 规则 数量 可 能 会 很 庞大 ， 也 可 能 不 会 匹配 到 当前 的 DOM 元 素 ， 因 此 浏览 需 一 
般 会 建立 样式 规则 索引 树 ， 这 时 如 何 快 速 判 断 一 个 CSS 选择 需 不 匹配 当前 元 素 ， 是 极其 重要 的 。 

浏览 旨 解 析 方 式 有 以 下 两 种 ; 

(1) 正 向 匹配 。 例 如 ，div div p em， 先 在 HTML 中 检查 当前 元 素 ， 找 到 最 上 层 的 div 后 再 往 下 找 ， 如 
果 遇 到 不 匹配 的 元 素 ， 就 必须 返回 到 最 上 层 的 dv， 然后 往 下 匹配 选择 融 中 的 第 一 个 div， 回 溯 在 干 次 后 ， 


s 门口 。 
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才能 确定 匹配 与 否 ， 执 行 效率 很 低 。 

(2 ) 道 向 匹配 。 如 果 当 前 的 DOM 元 素 是 div， 而 不 是 em， 那 么 只 要 一 步 就 能 排除 。 只 有 在 匹配 时 ， 
才 会 不 断 向 上 找 父 节 点 进行 验证 。 

由 于 匹配 的 情况 远 远 低 于 不 匹配 的 情况 ， 所 以 道 向 匹配 带 来 的 优势 是 很 大 的 。 在 这 种 情况 下 ， 尾 部 选 
择 符 越 具 体 ， 执 行 效率 就 越 高 。 如 果 在 选择 器 尾部 加 上 通配符 “*”， 就 会 大 大 降低 这 种 优势 。 

总 之 ,浏览 器 从 右 到 左 进行 查找 的 优势 是 可 以 尽早 过 滤 掉 一 些 无 关 的 样式 规则 和 元 素 。 

【示例 】 以 3.4.1 节 示 例 为 基础 ， 解 析 下 面 CSS 选择 器 字符 串 。 


div > div.sub p span.red 


如 果 从 左 到 右 进 行 查找 ， 则 解析 步骤 如 下 : 

第 1 步 ， 先 找到 所 有 div 元 素 。 

第 2 步 ,在 第 1 个 div 元素 内 找到 所 有 div 子 元 素 ， 且 class 为 sub。 

第 3 步 ， 按 顺序 逐 层 匹配 p span.red 元 素 。 

第 4 步 ， 如 果 遇 到 不 匹配 的 情况 ， 就 要 回溯 到 开始 点 div 或 者 Pp 元素， 然后 搜索 下 个 节点 ， 依 次 重复 
操作 。 

这 种 方式 对 于 一 个 只 匹配 很 少 节点 的 选择 器 来 说 ， 效 率 是 极 低 的 ， 因 为 花费 了 大 量 时 间 在 回溯 匹配 不 
符合 规则 的 节点 。 

如 果 从 右 到 左 进行 查找 ， 则 解析 步骤 如 下 : 

第 1 步 ， 先 查找 所 有 <span class='Tred'> 元 素 。 

第 2 步 ， 在 匹配 到 的 节点 中 进行 过 滤 ， 逐 个 判断 左 侧 相 邻 节点 是 否 为 D， 这 样 可 以 过 滤 掉 部 分 元 素 ， 只 
有 符合 当前 的 子规 则 才 会 再 匹配 上 一 条 子规 则 。 

对 于 DOM 树 来 说 ， 一 个 元 素 可 能 包含 奋 干 子 元 素 ， 如 果 每 个 都 去 判断 显然 性 能 很 低 ; 而 一 个 子 元 素 只 
有 一 个 父 元 素 ， 所 以 过 滤 的 速度 会 非常 快 。 

所 以 ， 浏 览 器 在 解析 CSS 选择 器 时 就 是 根据 从 右 到 左 的 算法 去 解析 。 


3.4.3 CSS 选择 痢 解 析 机 制 


JavaScript 解析 过 程 包含 两 个 阶段 : 预 编译 和 执行 阶段 。 在 预 编译 期 ， 通 过 词法 分 析 、 语 法 分 期 ， 完 成 
对 规则 的 预 处 理 。 

Sizzle 对 CSS 选择 禹 的 解析 也 借用 了 JavaScript 的 解析 思路 。CSS 选择 占 是 一 串 字 符 串 ，Sizzle 先 通 过 
词法 分 析 ， 找 出 这 段 字 符 串 对 应 的 规则 。 在 Sizzle 中 ， 词 法 分 析 主 要 定义 了 一 个 tokenize 处 理 器 ， 用 来 对 
CSS 选择 个 进行 词法 分 组 。 

【示例 】 下 面 以 3.4.1 节 示 例 为 基础 简单 分 析 tokenize 的 处 理 结果 。 

第 1 步 ， 在 Sizzle 源码 中 找到 下 面 一 行 代 人 码 : 

1f ( (support.qsa = rnative.test( document.querySelectorAll )) ) { 


修改 为 下 面 形式 : 
1f ({ (support.qsa =false &é& rnative.test( document.querVSelectorAll )) ) { 


目的 : 阻止 浏览 器 优先 使 用 querySelectorAll 接口 ，rnative.test(document.querySelectorAll) 用 来 获取 当前 
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浏览 器 是 否 文 持 querySelectorAl1， 然 后 把 检测 结果 存 人 support.qsa， 后面 代码 将 根据 这 个 标志 变量 决定 是 
否 优先 调用 querySelectorAll0 方法 。 如 果 该 属性 值 为 false， 则 Sizzle 将 采用 过 去 的 算法 进行 设计 ， 这 样 读 
者 才 可 以 观察 到 tokenize 处 理 器 的 工作 状态 。 

第 2 步 , 在 正 浏 览 融 中 预览 testl.html。 

第 3 步 ， 按 Fl2 键 ， 打 开 开 发 工具 窗口 ， 切 换 到 “脚本 ”选项 卡 。 

第 4 步 ， 选 择 sizzle.js， 在 搜索 文本 框 中 输入 “tokens.push”， 在 源 代码 中 找到 该 行 代 人 码 。 

第 5 步 ， 在 窗口 左 侧 边 沿 单 击 ， 添 加 一 个 断 点 ， 以 便 实 时 进行 观察 。 

第 6 步 ， 在 工具 栏 中 单 击 “ 局 动 测试 ”按钮 ， 准 备 测 试 。 

第 7 步 ， 在 窗口 右 侧面 板 选择 “监视 ”选项 卡 ， 分 别 增加 4 个 变量 ， 如 图 3.4 所 示 。 


选择 文件 how si 二 
HTML 《SS 控制 台 | 脚本 探查 器 网络 okens pus 
| 


file Users/B/ Documents/ slzzleslrzle,s. 
DPE For | type 1n Expr. Eilier )} | A 
1BT7D : 1t [ tnateh = matehFywpr[l tome ]. erere | soFar jj] 
1871 : hateh = preFilters[ type ][ matek 1)) 
18T7z | natehad = match sbi Et Lt) ; 


1873 ; tokens. Tustan 
1674 | 人 

| 1BT5 
BTE : 


添加 监测 变量 


图 3.4 使 用 调试 工具 进行 调试 


第 8 步 , 在 正 浏 览 需 中 单 击 “刷新 ”按钮 ， 开 始 调试 代码 。 
第 9 步 ， 在 调试 窗口 中 连续 单 击 “继续 ”按钮 ( 按 F5 键 )， 可 以 在 “监视 ”面板 中 观察 到 变量 的 变化 
过 程 ， 如 图 3.5 所 示 。 


文 必 (PR 查 皖 (M 条 用 [中 查看 () 图 牌 0 租 序 (C) 工具 Tm 蚂 证 4 9 | 济 析 式 : 1E10CE》 广 档 | 芝 式 Wi: 标 在 本 
HTML CSS 控制 台 | 脚本 开本 证 网 铬 2 [okenspush lH 史 
Or 闪 ” E ET 

a E 到 


Ea 二 2 CE [ubject Gh... Object, (Array) 
Gbject 


i tinatch = matchExpr[ type ]. ezecl = ws 此 由 
和 Eragilrers[ iype i ateh 11 ] 1 
matehed = nateh. shift [i]. 
1okens. hush it 


[I 
LE 
{ Cbject 
人 
walna: matchad, : 9 Le, 
:| 帕 - 闪 了 莹 [. 
人 
芝 
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Cbject 

Objpect 

Objedt 

Cbject 

Object 

Cbject 

Ob cct 

Objed, (Array) 
String 

String 

Oblect, (Array) 


type: tlype, 


“ 继 练 ” 按 印 natehes: nateh 


= soFar. slirel matehed Lenzth 1: 


| 


prototype] 


Strimg 


: : Strin 
I Returrn the length cf the irmalid ereess 二 [< 本 et (Array] 
Fr fF we re just parsine . 
Fr Dthorwise, thrpoy dn aTFoT or reatorn tolrens 
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3.5 ”监视 变量 变化 过 程 


经 过 tokenize 处 理 带 人 处理 后 分 解 为 一 个 数组 对 象 ( tokens )， 每 个 元 素 (token ) 为 一 个 匹配 对 象 。Sizzle 
的 Token 格式 如 下 :， 


es 门 1 。 


Token:{ 
value:' 匹配 到 的 字符 串 '， 
type:' 对 应 的 Token 类 型 ' 
matches:' 正则 匹配 到 的 一 个 结构 ' 
4 


Sizzle 获取 到 匹配 后 的 结构 Token， 就 可 以 进行 后 期 相关 处 理 。 
3.4.4 tokenize 处 理 希 
tokenize 处 理 融 是 一 个 词法 解析 困 数 。 通 过 词法 解析 ， 分 解 CSS 选择 震 字 符 串 形成 组 ， 每 组 再 按 序 分 


tokenize = Silzzle.tokenize = function (selector, parseOnly) { 


retum parseOnly ? soFar.leneth : 
soFar ? Slzzle.error( selector ) : tokenCache( selector, eroups ).slice( 0 ): 
和 


回 selector: CSS 选择 器 字符 串 。 
加 parseOnly: 是 否 仅 做 语法 解析 。 如 果 为 tue， 则 仅 做 语法 解析 ， 困 数 返回 0; 否则 返回 一 个 选择 需 
字符 串 分 组 的 二 维 数组 。 
tokenize 处 理 器 返回 一 个 Token 序列 的 二 维 数组 groups; 数组 元 素 为 tokens 数组 ，tokens 数组 是 一 个 
token 序列 ， 每 个 token 是 一 个 对 象 。token 对 象 的 格式 如 下 : 


{ 

value:' 匹配 到 的 字符 串 ',// 如 "div" 

type:' 对 应 的 Token 类 型 // 如 "TAG" 

matches:' 正则 匹配 到 的 一 个 结构 ',// 如 ["'div", index: 0, input: "div > div.sub p span.red"] 
} 


【示例 】 假 设 传人 CSS 选择 髓 为 “div > p + .sub[type="checkbox"], 者 d:first-child”， 可 以 分 为 两 个 规则 ， 
即 “div > p+ .sub[type="checkbox"]J” 和 “# 胡 d:first-child”， 则 groups 对 象 数组 长 度 为 2。 
完整 代码 如 下 : 


tokenize = Sizzle.tokenize = function (selector parseOnly) {// 选择 需 分 组 ， 每 组 按 序 分 解 选择 符 
var matched, match, tokens, type, 


soFar, 1/ 表示 目前 还 未 分 析 的 选择 占 字 符 串 剩余 部 分 
groups, 上 表示 目前 已 经 匹配 到 的 规则 组 。 例 如 ， 针 对 上 面 示例 ，groups 的 长 度 最 后 是 2， 存放 的 是 每 个 
规则 对 应 的 Token 序列 */ 
preFilters. // 预 处 理 表 达 式 
cached = tokenCache[selector + " "|: // 缓存 选择 占 字 符 串 
/ 如 果 缓 存 中 有 对 应 的 分 组 信息 ， 直 接 读 取 即 可 ， 避 人 免 重复 解析 
if (cached) { 


// 如 果 只 是 语法 解析 ， 则 返回 0; 否则 返回 分 组 信息 
return parseOnly ? 0 : cached.slice(0): 
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/初始 化 CSS 选择 器 
soFar = SelectoT: 
eroups = []: /最 后 要 返回 的 结果 ， 一 个 二 维 数组 
/访问 预 处 理 器 ， 对 匹配 到 的 Token 适当 做 一 些 调整 
preFilters = EXprpreFllter: 
/递归 分 析 CSS 选择 器 字符 串 
/ 从 左边 开始 匹配 ， 每 匹配 到 一 个 选择 符 ， 就 推 人 栈 内 保存 
// 同时 去 除 已 经 匹配 的 选择 符 ， 继 续 匹配 剩余 字符 串 
/如 "div>p+.sub input[type='checkbox']" 
while (soFar) { 
// 遇 到 逗号 ， 并 第 一 次 运行 
/ 以 第 一 个 逗号 分 隔 选 择 符 ， 然 后 去 掉 前 面 的 部 分 
1 (Imatched || (match = rcomma.exec(soFar))) + 
if (match) {// 如 果 匹 配 到 逗号 
/ 不 要 使 用 逗号 作为 有 效 的 分 隔 符 
/ 去 掉 第 一 个 (上 一 个 结束 的 ) 无 效 的 皖 号 (逗号 前 面 是 空白 开头 ) 
soFar = soFar.slice(match|0|.leneth) || soFar: 


b 
// 创建 新 的 tokens 
1/ 往 规 则 组 里 边 推 入 一 个 Token 序列 ， 目 前 Token 序列 还 是 空 的 
groups.push((tokens = [])): 
} 
matched = false: 
/将 CSS 选择 融 字 符 串 以 关系 选择 融 进 行 划 分 ， 因 为 它们 比较 简单 ， 且 是 单字 符 
/ 先 处 理 几 个 特殊 的 Token: >、+、 空 格 、~ 
1 ((match = rcombimators.exec(soFar))) { 
/获取 匹配 的 字符 
matched = match.shift( ): 
/ 从 数组 头 部 移出 一 项 ， 存 人 tokens， 放 人 Token 序列 中 
tokens.push( { 
value: matched, 
/ 蔡 换 后 代 选 择 震 为 单个 空格 ， 避 免 多 个 空格 影响 匹配 操作 
/match[0] 是 捕获 组 1， 包 含 关 系 选 择 符 
type: match|0|].replace(rtrim, ””) 


E 
/ 去除 匹配 的 字符 
soFar = soFar.slice(matched .leneth): 
} 
/Exprfilter 定义 的 过 滤 选 择 器 
请 
这 里 开始 分 析 以 下 Token: TAG、ID、CLASS、AITR 、CHILD、PSEUDO 、NAME 
将 每 个 选择 器 组 依次 用 ID 、TIAG、CLASS、AITR、CHILD 、PSEUDO 这 些 正则 进行 匹配 
Exprfilter 里 包含 这 些 key: 
matchExpr 过 滤 正 则 | 
ATTR: /MN\[[\x20\t\n of]* (2:N Dw- | 00-\xa0|)+) NN\x20\t\rn\n\f|*(2:(* 人 $1~|?=)N\x20\t\r\n\f]* 2:([""]) 
(QIN ?N33 wR00-xa0D) DD) x20nrafl\|/ | 
CHILD: /^:(onlylfirstllastlnthlnth-last)-(child|of-type)(?:\([\x20\t\rin\f]*(evenlodd|l(([+-])Q\ad*)n)[\x20\tn | 
Dr 2:(+- Ex2O0tEDd GdHDDDE2OEDI VA 
CLASS: /人 (2 [AROO-a0|THN 
ID: ASw-|AOO-a0])HEY 


s D3* 


2 信和 门 到 精通 ( 稚 课 精 编 县 ) 


PSEUDO: /人 (QW\.Dw-||[ 人 x00-\xa0 DH CNA" DWN?2N3ICEMN OMNINP E20 和 mf (CDWw-|| 
[~\x00-\xa0|)+)[ x20\PT oC: $=)[ 20\0n Of" DMD ?NS A wj 人 x00\ 
xa0D PDDD E20 nf VY 

TAG: (QW.Dw*-]|[ 人 00-\xa01)+)/ 

Bool: /^(?:checked|selectedlasynclautotocuslautoplay|controls|deferldisabled|hiddenlismapllooplmultiplelopen| 

rea donlylrequired|scoped)$/1 

needsContext: /人 ^\x20\t\n ntl* [>+~||:(evenloddleqletlltInthlfirstllast)(?:\(D x20\tr of * (Gd) Nd*) Nx20\tnn, 

nf D(C =[ 人 I$ 

如 果 通 过 正则 匹配 到 了 Token 格式 : match = matchExpr[ type ].exec( soFar ) 

然后 判断 是 否 需 要 预 处 理 : !preFilters[ type ] 

如 果 需 要 ， 那 么 通过 预 处 理 需 将 匹配 到 的 信息 处 理 一 下 : match = preFilters[ type ]( match ) 

sr 

tor (type In Expr.filter) { 

/ 通 历 filter 
1{ ((match = matchExpr[type|.exec(soFar)) && (PreFllters|type| || 
// 当前 type 匹配 到 sofar， 捕 获 内 容 赋值 给 match 
(match = preFilters|typel(match)))) { 
matched = match.shift( ): 
//preFilter 中 有 type， 也 © 处 理 结 果 给 match 


// 放 人 Token 序列 中 

tokens.push( { 
value: matched // 匹配 的 全 部 内 容 
type: type, 1 类 型 
matches: match / 对 sofar 的 捕获 组 


)); 
/ 剩余 还 未 分 析 的 字符 串 需要 减 去 这 段 已 经 分 析 过 的 匹配 字符 
soFar = soFar.slice(matched .length): 

} 


} 
/如 果 没 有 匹配 到 ， 说 明 选 择 器 在 这 里 有 错误 ， 直 接 中 断 词 法 分 析 过 程 
// 这 是 Sizzle 对 词法 分 析 的 异常 处 理 
if (Imatched) { 
break: 1/ 结束 时 ,没有 匹配 到 内 容 ， 退 出 循环 
} 


} 
// 放 到 tokenCache0 函数 里 进行 缓存 
此 如果 只 需要 这 个 接口 检查 选择 需 的 合法 性 ， 直 接 就 返回 soFar 的 剩余 长 度 ， 倘 各 大 于 零 ， 说 明 选 择 器 不 合法 党 
// 其余 情 况 ， 如 果 soFar 长 度 大 于 零 ， 抛 出 异常 ; 否则 把 groups 记录 在 cache 里 并 返回 
return parseOnly ? 
// 返回 多 余 的 长 度 
soFar.leneth : 
/需要 实际 匹配 得 到 分 组 
soFar ? 
// 有 多 余 的 就 抛 出 错误 
Slzzle.error(selector) : 
/缓存 groups 
tokenCache(selector, eroups).slice(0): 
下 


例如 ， 针 对 “title,div > :nth-child(even)” 选 择 回 ， 解 析 后 的 分 组 信息 如 下 : 
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| 
[1 | 
value: "title", | 
type: "TAG", 
matches: | "utle"| 
让 
[4 
value: "div", 
type: ["TAG", matches: ["div"| 
le | 
\ | 
value: "=>", | 
type: ">" | 
上 | 
{ | 
value: ":nth-child(even)", | 
type: "CHILD". | 
matches: ["nth", "child", "even", 2, 0, undefined, undefined, undefined | 
] | 
}] | 
] 


有 多 少 个 分 组 选择 入， 就 有 多 少 个 数组 ， 数 组 里 面包 含 拥 有 value 与 type 的 对 象 。 


3.5 选择 过 尖 


本 节 将 结合 下 面 示 例 继续 分 析 当 完成 词法 分 组 之 后 Sizzle 的 操作 。 
HTMLIL DOM 结构 : 
<div id="text"> | 
<p> | 
<Input type="text" /> | 
</p> 
<div class="sub"> 
<Input type="checkbox" name="me" /> | 
<p>Slzzle</p> | 
</div> | 
</div> 


CSS 选择 带 : 
div > p+ div.sub input[type="checkbox"| 


JavaScript 脚本 : 


<script> 
window.onload = function O { 
console.log(Sizzle('div > p + div.sub mput[type="checkbox"|')) 


s 门口 。 


zy 以 入 门 到 精通 ( 往 课 精 编 县) 


</script> 


下 面 按 和 常规 思维 逻辑 来 描述 主要 任务 。 

第 1 步 ， 选 择 div 元 素 的 所 有 子 元 素 p。 

第 2 步 ， 选 择 紧邻 p 元 素 后 的 所 有 div 元 素 ， 且 class="sub"。 

第 3 步 ， 选 择 divsub 元 素 内 所 有 input 元 素 ， 且 type="checkbox"。 

在 jQuery 3.2.1 中 ， 针 对 高 级 浏览 紫 会 自动 使 用 querySelectorAll 处 理 所 有 CSS 选择 器 ， 不 再 使 用 低 效 


的 原始 方法 。 为 了 深入 学 习 Sizzle 引擎 ， 本 节 主 要 讲解 在 低 版 本 中 是 如 何 实现 的 ， 其 中 伪 类 选择 大 、XML 
处 理 等 在 后 文 讲解 ， 本 节 暂 不 涉及 这 方面 的 处 理 。 


首先 ， 读 者 需要 了 解 下 面 知识 点 。 
CSS 选择 大 的 位 置 关 系 。 

回 CSS 选择 器 基本 实现 接口 。 

回 CSS 选择 各 从 古 到 左 匹 配 原则 。 


3.5.1 位 置 天 系 


在 HIML 文档 中 ， 所 有 节点 之 间 都 存在 如 下 几 种 关系 。 
回 祖先 和 后 代 
四 ”父亲 和 儿 于 
四 ” 相 邻 兄弟 
加” 同 级 兄弟 
在 CSS 选择 融 里 分 别 对 应 的 标识 符 是 空格 、>、+、~-。 
其 实 还 有 一 种 特殊 关系 一 divsub， 中 间 没 有 空格 表示 选取 一 个 class 为 sub 的 div 节点 ， 相 当 于 限定 关系 。 
在 Sizzle 中 ,专门 定义 了 一 个 Expr 对 象 ， 来 记录 选择 器 相关 的 属性 及 操作 。 它 有 以 下 属性 : 
//Sizzle 选择 器 集合 
/扩展 方法 和 属性 
// 暴露 方法 : jQueryexpr = Sizzle.selectors: 
//Expr 对 象 ，Sizzle.selectors 对 象 的 定义 
Expr = Sizzle.selectors = { 
relative: { // 块 间 关 系 过 滤 集 
">": { dir: "parentNode", first: true }, 
"" {dir: "parentNode" }, 
"+": {dir: "previousSiblnge", first: true }, 
"dr "previousSibline" 
} 
} 


在 Exprrelative 属性 中 定义 了 一 个 first 属性 ， 用 来 标识 两 个 节点 的 “紧密 ”和 程度。 例如， 父子 关系 和 相 


邻 兄 绩 关系 就 是 紧密 的 。 在 创建 位 置 匹 配 适 时 ， 会 根据 first 属性 来 匹配 合适 的 节点 。 


3.5.2 ”实现 接口 


祭 本 querySelector 和 querySelectorAll，, 近 供 | 妆 口 。 
除了 Sel 和 SelectorAll，HTML DOM 提供 了 4 个 API 接口 
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getElementById: 上 下 文 只 能 是 HTML 文档 。 

getElementsBYName: 上 和 下文 只 能 是 HIML 文档 。 

getFlementsByTagName: 上 下 文 可 以 是 HTML 文档 、XML 文档 、 元 素 节 点 。 
getElementsByClassName: 上 下 文 可 以 是 HTML 文档 、 元 素 节 点 。 提 示 ，IE 8- 不 文 持 。 
所 以 Sizzle 只 有 三 种 可 靠 的 兼容 用 法 。 

Exprtind= 1{ 

TD : context.getElementByld, 

'CLASS': context.getElementsByClassName, 

'TAG' : context.getElementsByTaeName 


多 多 的 


3.5.3 匹配 原则 | 


CSS 选择 器 遵循 从 右 到 左 的 匹配 原则 。 以 下 面 CSS 选择 器 为 例 : | 
div > p+ div.sub input[type="checkbox"| | 


通过 词法 分 析 器 tokenize 分 解 后 ， 对 应 的 规则 ， 即 分 解 的 每 个 小 块 如 下 : | 
type: "TAG" | 
value: "div" 
matches ... 


type: Wh 


| 
value: ">" | 


type: "TAG" 
value: "p" 1 
matches ... 


type: 十 
Value: "十 " 


type: TAC” 
Value: "div" | 


matches ... 


type: "CLASS" 
value: ".sub" 
matches ... | 


type: Fr 
he | 
value:"" 


type: TAGr | 


value: "input" 
matches ... | 
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type: "ATTR" 
Value: "[type="checkbox"|" 
matches ... 


除 关 系 选 择 侦 外 ， 其 余 有 语意 的 标签 都 对 应 分 析出 matches。 例 如 ， 最 后 一 个 属性 选择 冀 分 支 "[type= 


"checkbox"]"。 


matches 三 | 
0: "type" 
1: "=" 
2: "checkbox" 
] 
type: "ATTR" 
value: "|[type="checkbox"|" 


分 组 之 后 ， 需 要 使 用 浏览 紫 提 供 的 API 实现 匹配 , 所 以 Exprfind 就 是 最 终 的 实现 接口 。 

第 1 步 ， 首 先 确 定 从 右 到 左 的 顺序 进行 匹配 ， 但 是 右边 第 一 个 是 "[type="checkbox"]"，Exprfind 不 认识 
这 种 选择 器 ， 所 以 只 能 往 前 继续 找 。 

type: TAG 

Value: "input" 


第 2 步 ， 这 种 标签 Exprfind 能 匹配 到 ， 所 以 就 会 直接 调用 以 下 代码 : 


Exprtndl"IAG"| = support.getElementsByYJIagName ? 
tunction (tag, context) { 
1f (typeot context.getElementsByTagName !—— "undefmed") 1 
returmn context.getElementsByTaeName(tag): 
//DocumentFraement 对 象 没有 getElementsByTagName， 使 用 querySelectorAll 
+ else 1f (support.qsa) { 
retum context.querySelectorAll(tag): 


} 
1 
tunction (tag, context) { 
var elem, tmp = ||,1= 0, 
// 如 果 gBEBN 也 出 现在 DocumentFragment 节点 中 
results = context.getElementsByTagNamel(tae): 
// 过 滤 挥 可 能 的 注释 广 点 
lf (tag —"™") 1 
while ((elem = results[1++|)) { 
lf (elem.nodelype —=— 1) { 


tmp.push(elem): 
} 
} 
return tmp: 
} 
Tetul results: 


和 
由 于 getElementsByTagName 方法 返回 的 是 一 个 合集 ， 所 以 Sizzle 在 这 里 引入 了 seed ( 种 子 合集 )， 搜 
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索 需 搜 到 符合 条 件 的 标签 ， 都 放 和 人 这 个 初始 集合 seed 中 。 | 
第 3 步 ， 完 成 匹配 之 后 ， 就 不 再 继续 往 下 匹配 了 ， 开 始 进行 整理 : 重组 CSS 选择 项， 噜 反 已 经 用 于 处 
理 的 TAG 标签 一 一 input。 这 时 CSS 选择 器 缩减 为 : | 


selector: "div > p + div.sub [type="checkbox"]" 


如 果 直 接 剔 除 后 ，selector 为 空 ， 就 证 明 满足 匹配 要 求 ， 直 接 返回 结果 。 

第 4 步 ， 如 有 果 selector 不 为 空 ， 则 开始 进行 过 滤 操 作 。 这 里 能 够 使 用 的 对 象 包 括 seed 集 、 通 过 tokenize 
分 析 组 成 match 合集 。 | 

删除 input 之 后 ，CSS 选择 需 变 成 : | 

selector: "div > p+ div.sub [type="checkbox"|" 


此 时 ，send 目标 合集 有 两 个 最 终 元 素 。 

第 5 步 ， 下 面 开 始 使 用 selectO 函数 快速 从 两 个 条 件 中 找到 目标 元 素 。selectO 函数 的 源 代码 如 下 : 
六 

Sizzle 编译 选择 器 功能 的 低级 选择 功能 ， 是 Sizzle 引擎 的 主要 入 口 函数 


2 


selector: CSS 选择 器 字符 串 ， 或 者 预 编译 函数 ， 使 用 Sizzle.compile 构建 的 选择 器 函数 
context: 上 下 文 元 素 
results: 选择 结果 集 ， 数 组 类 型 
seed: 一 组 要 匹配 的 元 素 
返回 值 : 
退回 results。 
2 
select = Sizzle.select = function (selector, context, results. seed) { 
Var 1, tokens, token., type. find, 
compiled = typeof selector 二 "function" && selector,//selector 是 function 类 型 ， 编 译 结果 
/解析 出 词法 格式 ，seed 不 存在 时 ，match 赋值 为 selector 的 解析 结果 
match = !seed && tokenize((selector = complled.selector || selector)): 
/ 初始 化 结果 集 
results = results || [|: 
/ 如 果 外 界 没有 指定 初始 集合 seed， 它 提供 了 操作 的 上 下 文 
// 如 果 selector 只 有 一 个 分 组 ， 单 个 选择 器 ， 没 有 多 组 ， 即 没有 有 带 号 的 情况 : div, p， 可 以 进行 特殊 优化 
1if (match.leneth 1)1{ 
// 如 果 选 择 器 是 也， 则 减少 上 下 文 context 
tokens = match[0] = match[0].slice(0): /取出 选择 器 Token 序列 
1/ 如果 第 一 个 selector 是 id， 可 以 设置 context 快速 查找 
1f (tokens.lenegth > 2 && (token =tokens|0|).type =——= "ID" && 
//tokens 长 度 大 于 2， 且 以 DD 选择 符 开头 (快速 处 理 方法 ) 
context.nodeType =—— 9 && documentIsHIML 多 上 
// 支持 getById，context 是 document， 文 档 是 HTML 
Expr.relative[tokens[] |.type|) { 
/第 二 个 选择 符 是 关系 选择 符 
context = (Expr.find["ID" |(token.matches|0|.replace(runescape, tunescape), context) || [|)[|0]: 
/设置 上 下 文 为 当前 ID 指向 的 元 素 
if (!context) { 1/ 如果 上 下 文 不 存在 ， 返回 结果 
return results: 
1/ 预 编 详 的 匹配 带 仍 然 会 验证 祖先 ， 所 以 提高 一 个 级 别 


s 门口 。 


1 2 信和 门 到 精通 ( 稚 课 精 编 县 ) 


} else 二 (complled) { 
context = context.parentNode: 


| } 
selector = selector.slice(tokens.shift().value.length); // 最 后 去 掉 第 一 个 选择 符 
| } 

/ 获取 从 右 到 左 匹 配 的 种 子 集 


1 三 ImnatchExpr| "meedsContext "|.test(selectorD) ? 0 : tokens.length: 
// 如 果 selector 需要 上 下 文 (对 照 matchExpr 看 ),i 置 0， 否则 置 tokenslength 


while (1--) { 

token = tokens[i]: 1/ 不 宕 要 上 上 下文， 从 布 同 左 授 历 tokens 
if(Expr.relative[(type = token.type)]) {// 如 果 是 一 个 组 合 问 ,终止 

break: // 遇 到 关系 选择 符 ， 跳 出 
} 
1f ((find = Expr.find[typel|)) { /type 对 应 的 find 困 数 存在 

// 尝试 能 否 通 过 搜索 器 搜 到 符合 条 件 的 初始 集合 seed 

if ((seed = find( 

token.matches|0|.replace(runescape, tunescape), // 当前 selector 


rsibling.test(tokens|[0|.type) && testContext(context.parentNode) || context 
// 如 果 是 兄弟 选择 符 ， 返回 parentNode， 否 则 返回 原来 的 context， 作 为 find 的 参数 


)) 1 
1/ 如 果 seed 为 空 ， 或 没有 tokens， 可 以 提前 人 返回 
tokens.splice(i, 1): // 移 除 当 前 选择 符 


/获取 当前 剩余 的 selector 
selector = Seed.length &é& toSelector(tokens): 
// 检测 选择 器 是 否 为 空 。 如 果 为 空 ， 提 前 返回 结果 
1f (1!selector) { 
push.apply(results, seed): / 候选 集 添加 到 结果 集 


return results: 1/ 返回 结果 
上 
break: / 已 经 找到 符合 条 件 的 seed 集合 ， 前 边 还 有 其 他 规则 ， 跳 出 
上 
上 
} 
i 水 


使 用 compile 生成 一 个 终极 匹配 器 
通过 这 个 匹配 器 过 滤 seed， 把 符合 条 件 的 结果 放 到 results 里 


后 成 编译 晴 数 : 
var superMatcher = compile( selector, match ) 
执行 : 
superMatcher(seed,context,!documentIsHTML ,results,rsibling..test( selector )) 
7 
(complled || complle(selector, match))}( 
seed, // 候选 集 
context, /上下文 
IdocumentIsHIML, /XML 
results. 


Icontext || Tslbling.test(selector) &c& testContext(context.parentNode) || context 


A 
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return results: /返回 结果 
人 
第 1 步 ， 按 照 从 右 到 左 原则 取出 最 后 一 个 token， 如 [type="checkbox"]。 


{ 
matches : Array|3| 
type -ATTIR”" 
Value : "|[type=" 
checkbox "|" 

} 


第 2 步 ， 过 滤 类 型 如 果 fype 是 >、+、~、 空 格 四 种 关系 选择 器 中 的 一 种 ， 则 跳 过 ， 继 续 过 滤 。 

第 3 步 ， 直 到 匹配 到 ID 、CLASS、TAG 中 的 一 种 ， 因 为 这 样 才 能 通过 浏览 紫 的 接口 获取 元 素 。 

第 4 步 ， 此 时 seed 种 子 合集 中 就 有 值 了 ， 这 样 把 匹配 的 范围 缩小 到 一 个 很 小 的 范围 。 

第 $ 步 ， 如 果 匹 配 的 seed 人 合集 有 多 个 ， 需 要 进一步 的 过 滤 ， 修 正 选择 骨 selector: "div>p +divsub [type= 
"checkbox"|"。 

第 6 步 ， 完 成 选择 过 滤 之 后 ， 跳 到 编译 困 数 阶段 。 


3.6 编译 函数 
从 Sizzle 1.8.0 开始 ，Sizzle 开始 引入 编译 困 数 机 制 ， 主 要 作用 是 分 词 的 筛选 ， 提 高 逐个 匹配 的 效率 。 


3.6.1 元 匹配 疾 


通过 tokenize 处 理 器 分 类 的 group 都 有 对 应 的 type， 每 种 type 都 会 有 对 应 的 处 理 方法 ， 源 代码 如 下 : 
// 过 滤 函 数 
filter: { 
// 标签 过 渡 函 数 
"TAG": function (nodeNameSelector) + 
// 类 过 滤 函 数 
"CLASS": function (className) { 
/ 属性 预 过 滤 
/name 是 属性 名 ，operator 是 操作 符 ，check 是 要 检查 的 值 
/ 如 [type="checkbox"] 中 ，name='"type"，operator="="，check="checkbox"， 返 回 布尔 值 
"ATTR": function (name, operator check) { 
// 子 元 素 选 择 些 过 滤 
"CHILD": function (type, what, areument, first, last) { 
// 伪 类 过 滤 
"PSEUDO": function (pseudo, areument) { 
} 


可 以 把 “元 ”理解 为 “原子 ”， 也 就 是 最 小 的 那个 匹配 器 。 在 CSS 选择 器 中 最 小 单元 可 以 划分 为 ATTR、 
CHLD、CLASS、ID、PSEUDO、TIAG。 在 Sizzle 中 有 一 些 工厂 方法 用 来 生成 对 应 的 这 些 元 匹配 毅 ， 如 Exprfilter。 


se /1|* 


J 从 入 门 到 精通 ( 微 课 精 编 版 ) 


下 面 可 以 看 看 属性 选择 天 的 处 理 代 但 : 


/ 属性 预 过 滤 
/name 是 属性 名 ，operator 是 操作 符 ，check 是 要 检查 的 值 
/ 例如 选择 天 [type="checkbox"] 中 ，name='"type"，operatolr 一 "= "，check="checkbox" 
/返回 布尔 值 
"ATTR": function (name, operator check) { 
/返回 一 个 元 匹配 器 ， 该 国 数 需要 参数 elem 
return function (elem) { 
/ 获取 elem 的 name 属性 
Var result = Sizzle.attr(elem. Dame): 
/判断 是 否 存 在 属性 值 
1f (result == null) + 
/如果 操作 符 是 不 等 号 ， 返 回 真 ， 因 为 当前 属性 为 空 ， 是 不 等 于 任何 值 的 
return operator —— "I="; 
} 
if(!loperator) {// 如 果 有 操作 符 ， 那 就 直接 通过 规则 
/ 如 果 没 有 操作 符 ，result 不 为 空 ， 那 么 属性 存在 ， 返 回 true 
return true: 


上 
/ 有 操作 符 ，result 不 为 空 ， 加 上 空格 ，check 后 面 会 加 上 空格 ， 方 便 比 较 
result + 一 
return operator 一 一 "=" ? result 一 一 check : // 如 果 是 等 号 ， 判 断 目标 值 跟 当 前 属性 值 相等 是 否 为 真 
operator 一 一 "!=" ? result ! 一 check :// 如 果 是 不 等 号 ， 判 断 目标 值 跟 当 前 属性 值 不 相等 是 否 为 真 
operator = 一 "=" ? check && result.indexOf(check) 一 = 0 :// 如 果 是 起 始 相 等 ， 判 断 目 标 值 是 否 
/在 当前 属性 值 的 头 部 
operator 一"*==" ? check && result.indexOf(check)>> -1:/ 这样 解释 : lane*=en 匹配 <html 
// lang='"XXXXenXXX"> 这 样 的 节点 


//slice ( -xxx.lenegth ) 检测 结尾 
operator 一 一 "$=" ? check && result.slice(-check.length) —= check :// 如 果 是 末尾 相等 ， 
/判断 目标 值 是 否 在 
/ 当前 属性 值 的 末尾 
//check 后 面 有 空格 ， 所 以 匹配 会 正确 工作 


// 这 样 解释 : lang~=en 匹配 <html lang="zh CN en"> 这 样 的 节点 
/e.g. en- 
operator —= "|=" ? result —= check || result.slice(0, check.leneth + 1) 一 一 Check 十 
"";// 这 样 解释 : lang=len 匹配 <html lang="en-US"> 这 样 的 节点 
false: 
实际 上 ，Sizzle 通过 对 selector 做 “分 词 ”， 打 散 之 后 再 分 别 从 Exprfilter 里 面 去 找 对 应 的 方法 来 执行 具 

体 的 查询 或 者 过 滤 的 操作 。 
3.6.2 ”编译 器 


为 了 提高 效率 ，Sizzle 引信 了 编译 函数 的 要 


念 。 通 过 Sizzle.compile 方法 内 部 的 matcherFromTokens 和 
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matcherFromGroupMatchers 把 分 析 关 系 表 生成 用 于 匹配 单个 选择 器 群 组 的 图 数 。 

matcherFromTokens 充当 了 selector 的 “分 词 ”"， 与 Expr 中 定义 的 匹配 方法 的 纽 市 ， 可 以 说 选择 符 的 各 
种 排列 组 合 都 是 能 适应 的 。Sizzle 的 巧妙 之 处 在 于 没有 直接 将 拿 到 的 “分 词 ” 结 果 与 Expr 中 的 方法 逐个 匹 
配 并 执行 ， 而 是 先 根 据 规则 组 合 出 一 个 大 的 匹配 方法 ， 最 后 一 步 执行 。 编 译 絮 的 源 代码 如 下 : 


/ 编译 也 数 机 制 
/通过 传递 进来 的 selector 和 match 生成 匹配 器 


// 把 selector 分 组 ， 得 到 对 应 的 elementMatchers 或 setMatchers， 再 调用 matcherFromGroupMatchers 获得 总 的 matcher 
/并 缓存 到 compilerCache 中 ， 以 后 使 用 相同 的 selector 时 ， 可 以 直接 查询 得 到 结果 
compile = Sizzle.compile = function (selector match /* Internal Use Only 仅 限 内 部 使 用 */) { 

var 1, setMatchers = [|], elementMatchers = ||, cached = compllerCachelselector + " "|: 


1 (Icached) + 


// 生成 可 用 于 检查 每 个 元 素 的 递归 函数 的 函数 


1 (Imatch) { 
match = tokenize(selector): 
} 
1= match.length: 
// 如 果 有 并 联 选择 器 ， 这 里 多 次 等 循环 
while (1--) { 
/多 从 后 回 前 过 历 match 


/ 无 缓存 


/ 如 果 没 有 词法 解析 过 ， 无 匹配 组 
1// 分析 selector， 分 割 成 数组 


1 从 后 回 醒 生成 丐 配售 


// 这 里 用 matcherFromTokens 来 生成 对 应 Token 的 匹配 此 
cached = matcherFromTokens(match|1|); 


/获得 match[i] 的 处 理 函 数 
if (cached[expando|) { 


// 有 expando 标记 ， 把 该 图 数 添加 到 setMatchers ( 集合 过 滤 函 数 ) 中 


setMatchers.push(cached): 
} else { 


/那些 普通 的 匹配 和 器 都 压 人 了 elementMatchers 中 


// 没有 expando 标记 ， 把 该 图 数 添加 到 elementMatchers ( 元 素 过 滤 函 数 ) 中 


elementMatchers.push(cached): 
} 


} 
/缓存 编译 函数 


睛 调用 matcherFromGroupMatchers 得 到 总 的 处 理 困 数 ， 再 把 这 个 困 数 缓存 到 complierCache 中 ， 可 以 看 
到 ， 通 过 matcherFromGroupMatchers( 图 数 来 生成 最 终 的 匹配 严 */ 
cached = compilerCache(selector, matcherFromGroupMatchers(elementMatchers, setMatchers )): 


/ 保存 选择 器 和 标记 化 
/ 添加 属性 selector 


cached.selector = selector: 


} 
/返回 cached， 把 这 个 终极 匹配 艇 返回 select 图 数 中 


Tetum cached: 


3.6.3 ”过 滤 函 数 


matcherFromTokens 通过 解析 selector 获得 对 应 的 过 滤 函 数 ， 源 代 人 如下: 


function matcherFromlokens(tokens) { 


» /3* 
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var checkContext matcher, ], 
len = tokens.length., 
//relative 是 关系 选择 符 与 对 应 的 dir 和 frst 
// 前导 的 关系 
leadineRelative = Expr.relative|tokens[0|.typel|, 
// 隐 式 的 关系 
implicitRelative = leadineRelative || Expr.relativef" "|, 
//leadingRelative 存在 ,i 置 1， 和 否则 置 0 
| 1= leadineRelative ? 1 : 0, 
| /基础 匹配 器 确保 元 素 可 从 顶级 上 下 文 访问 
/获得 基础 的 过 滤 困 数 ， 匹 配 checkContext 
| matchContext = addCombinator(function (elem) { 
returmn elem ==—= checkContext: 
}, ImplicitRelative, true), 
| //checkContext 有 elem 就 匹配 ， 这 里 的 context 是 数组 ， 即 多 个 context， 匹 配 任意 一 个 就 可 以 
| matchAnyContext = addCombinator(function (elem) { 
| return mdexOtf(checkContext, elem) > -1: 
+, ImplicitRelative, true), 
//matchers 晴 数 数组 
matchers = [function (elem, context, xml) { 
var ret = (lleadineRelative && (xml || context !== outermostContext)) || ( 
| 启 前 导 关 系 不 存在 ， 且 是 xml， 返回 tue， 不 是 xml 且 context 不 是 最 外 面 的 context 则 返回 true， 
否则 执行 下 面 代码 */ 
(checkContext = context).nodeType ? 
/icontext 是 单个 的 ， 使 用 matchContext 得 到 结果 
matchContext(elem, context, xml) : 
| //context 是 数组 ， 使 用 matchAnyContext 得 到 结果 
| matchAnyContext(elem, context, xml)): 
| // 避免 挂 在 元 素 上 (问题 # 299 ) 
/ 置 空 
checkContext = null: 
| retumn ret: 
| 1j; 
for (;1< len; 1t+) { 
| 1f ((matcher = Expr.relative|tokens[i|.type|)) { 
| /在 relative 中 有 当前 的 选择 符 
matchers = [addCombmator(elementMatcher(matchers), matcher)|; 
| 请 先 调用 elementMatcher 获得 匹配 matchers 中 所 有 函数 的 过 滤 函 数 ， 把 此 函数 作为 参数 传递 给 
| addCombinator， 获 得 当前 matcher 的 过 滤 函 数 ， 最 后 用 数组 包 庄 */ 
+ else { 
| // 在 relative 中 没有 当前 选择 符 
matcher = Expr.filter[tokens[il.typel.apply(mull, tokens|1|.matches): 
// 把 token[i].matches 传递 给 flter[typel]， 得 到 对 应 的 过 滤 函 数 matcher 
| // 看 到 一 个 位 置 matcher 返回 特别 upon 
| 让 (matcher[expando]) { 
/如 果 有 expando 标记 ， 说 明 它 是 位 置 匹配 器 ， 需 要 特殊 处 理 
// 找到 下 一 个 相对 运算 符 (如果 有 ) 并 正确 处 理 
] = 二 HH 
for (< len: tH) 1 
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$9p 
if (Exprrelative[tokens[j].type]) { 
break: 
} 
return setMatcher( 


// 调用 setMatcher 获得 对 应 的 过 滤 函 数 ， 返 回 
1> 1 && elementMatcher(matchers), 
/ 不 是 第 一 个 选择 器 就 要 预 过 滤 函 数 参数 matchers | 
1> 1 && toSelector( 
1/ 如 果 前 面 的 token 是 后 代 组 合 器 ， 则 搬 人 一 个 隐 式 任意 元 素 党 
tokens.sllce(0.1- 1).concat({ 
Value: tokens|1 - 2|.type 一 二 ” ”9 
// 如 果 当 前 位 置 匹配 带 前 前 面 是 后 代 关系 选择 答 ， 后 面 插 入 隐 式 的 通配符 * 


3}) 
)replace(rtrim, "$1"), 
/ 转换 为 selector 字符 串 ， 去 掉 左 右 空 白 符 ， 作 为 前 置 选 择 需 
matcher. 
1/ 匹配 函数 


1 =] && matcherFromTokens(tokens.slice(], ])), 

/如果 i， 即 当 前 位 置 匹配 器 到 下 一 个 关系 选择 紫 之 间 有 其 他 选择 占 ， 需 要 后 置 过 滤 
/ 因数 postFilter 

/递归 调用 因数 本 身 得 到 对 应 的 postFilter 

1]<len && matcherFromTokens((tokens = tokens.slice(]))). 

/ 如果 j<len， 即 下 一 个 关系 选择 符 后 面 还 有 其 他 选择 器 ， 需 要 传人 postFinder 参数 过 滤 
1// 同样 递归 调用 本 困 数 ， 获 得 对 应 的 postFinder 

] = len && toSelector(tokens) 

/ 获得 剩余 的 选择 髓 ， 传 人 postSelector 参数 tokens 在 上 一 步 被 赋值 为 剩余 的 token 


): 
b 
/ 运行 到 这 里 ， 说 明 不 是 位 置 匹 配器 ， 直 接 入 栈 
matchers.push(matcher): 


} 


} 

片 到 这 里 ， 整 个 tokens 被 处 理 完毕 ， 所 有 处 理 图 数 按 序 排 列 在 matchers 中 ， 此 时 调用 elementMatcher， 获 得 
符合 所 有 matchers 项 的 过 滤 果 数 */ 

return elementMatcher(matchers): 


b 
在 上 面 代码 中 ,重点 是 : 
cached = matcherFromTokens(groupl[1|); 


cached 的 结果 就 是 matcherFromTokens 返回 的 matchers 编译 滑 数 。matcherFromTokens 的 分 解 是 有 规律 
的 : 语义 节点 + 关系 选择 髓 的 组 合 。 

div 二 p+ div.sub Inputltype= "checkbox "| 

Expr.relative 匹配 关系 选择 甫 类 型 ， 当 遇 到 关系 选择 甫 时，elementMatcher 困 数 将 matchers 数组 中 的 也 
数 生成 一 个 靖 数 。 | 

再 递归 分 解 tokens 中 的 词法 元 素 ， 提 取 第 一 个 typ 匹配 到 对 应 的 处 理 方法 : 

matcher = Expr.filter[tokens[il.typel.apply(null, tokens|1|.matches): 
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例如 ， 下 面 是 TAG 类 型 源 代 码 。 
/过 滤 困 数 
filter: { 
// 标签 过 滤 晴 数 
"TAG": fnction (nodeNameSelector) 1 
var nodeName = nodeNameSelector.replace(runescape, funescape).toLowerCase():; 
retum nodeNameSelector =—— "*" ? 
// 选择 符 为 通 配 选 择 符 ， 直 接 返 回 true 
function () + 
return true: 


. 
/ 否则 比较 传人 参数 elem， 比 较 elem 的 节点 名 再 返回 结果 
/这 里 形成 团 包 
function (elem) { 
retum elem .nodeName && elem nodeName.toLowerCase() —— nodeName: 


};, 
matcher 最 终 返 回 的 结果 就 是 布尔 值 ， 但 是 这 里 返回 的 只 是 一 个 闭 包 上 盟 数 ， 不 会 马上 执行 ， 这 个 过 程 就 


如 果 遇 到 关系 选择 符 就 会 合并 分 组 了 。 


matchers = [addCombimator(elementMatcher(matchers), matcher)|: 


过 elementMatcher 生成 一 个 终极 匹配 站。 


/matchers 为 数组 的 情况 ， 返 回 过 滤 函 数 
function elementMatcher(matchers) { 
return matchers.length>1? 
// 如 果 有 多 个 matcher 国 数 ， 每 个 国 数 都 要 测试 
function (elem, context, Xml) { 
var 1 = matchers.leneth: 
while (1--) { 
// 有 一 个 不 为 真 ， 就 返回 false 
1f (1matchers[1i|(elem, context, Xml)) { 
return false: 
和 
} 
TetuIm true: 
全 
// 只 有 一 个 matcher 国 数 ， 则 matcher 困 数 本 身 即 可 作为 过 滤 困 数 
matchers|0|: 


} 


上 面 代码 将 分 解 这 个 子 匹 配 融 ， 返 回 一 个 curry 因数 ， 传 递 给 addCombinator( 困 数 。addCombinator0) 


/生成 关系 选择 符 过 滤 困 数 
function addCombmator(matcher, combimator, base) { 
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Var dir = combmator.d1r. 
skip = combmator.next. 
key = skip || dr 
checkNonElements = base &é& key ——= "parentNode". 
doneName = done++: 
return combimnator.first ? 
// 最 近 的 祖先 元 素 
/ 检查 最 近 的 祖先 / 前 一 个 元 素 
/返回 此 盟 数 作为 combinator 的 过 滤 晴 数 
function (elem, context Xml) { 
while ((elem = elem|[d1r])) { 
1{ (elem.nodeType —= 1 || checkNonElements) { 
/如 果 遇 到 元 素 节 点 或 没有 父 节 点 ,返回 匹配 函数 
return matcher(elem context, xml): 


4 
} 


return false: 


Fe 
1/ 检查 所 有 祖先 /前面 的 元 素 
//first 不 存在 ， 返 回 此 函数 
function (elem, context, xml) { 
var oldCache, uniqueCache, outerCache, 
newCache = [dirrmuns, doneName|: 
/ 不 能 在 xml 节点 上 设置 任意 数据 ， 所 以 它们 不 会 从 组 合 顺 缓存 中 获 益 
下 (CXmD 1 
while ((elem = elem|[di1r|)) { 
lf (elem.nodelype —= 1 || checkNonFlements) { 
1f (matcher(elem, context, xml)) { 
/判断 matcher 结果 ， 返 回 tue， 如 果 为 false， 还 要 继续 遍历 
Tetumm true: 


} 
}+ else { 
while ((elem = elem|di1r|)) { 
if (elem.nodelype —= 1 || checkNonElements) { 
outerCache = elem|expando| || (elem|expando| = {1!):; 
// 获得 、 创 建 外 部 缓存 
// 仪 支持 IE 9- 
/保护 复制 的 attroperties ( jQuery gh-1709 ) 
uniqueCache = outerCache|elem.uniquelID| || (outerCache[elem.unmiquelD| = {1}); 
1{ (skip && skip =—— elem .nodeName.toLowerCase()) { 
elem = elem|dir| || elem: 
+ else 1{ ((oldCache = uniqueCache|key|) && 
// 把 outerCache[dir] 赋值 给 oldCache， 如 果 它 存在 ， 即 有 缓存 可 用 ， 继 续 
oldcCache|0| = dmuns ww oldcache| 1 | 三 一 doneName) 1 
/ 第 一 项 全 等 于 dirruns 日 第 二 项 全 等 于 doneName， 即 方向 与 结果 都 存在 ， 继 续 
/ 分 配给 newCache， 所 以 结果 反 回 传播 到 以 前 的 元 素 
retum (DewCache|2| = oldCachel|2|): 


s/f/* 


MN 从 入 门 到 精通 ( 微 课 精 编 版 ) 


// 把 这 个 缓存 第 三 项 传递 给 newCache[2] ( newCache 在 outerCache 中 ，outerCache 

/在 elem[expando] 中 ) 

/并 返回 它 作 为 结果 

// 这 一 项 代表 这 个 elem 在 当前 dir 和 doneName 下 匹配 的 结果 

} else { 

WouterCache 不 存在 ， 即 第 一 次 遍历 到 这 个 元 率 

/重新 使 用 新 的 缓存 ， 所 以 结果 反 回 传播 到 以 前 的 元 素 

UnlqueCache|key| = newCache: 

// 把 newCache 传递 给 outerCache[dir]， 即 存 人 elem[expando]， 建 立 缓存 

//match 意味 着 完成 ，fail 意味 着 必须 继续 检查 

1f ((newCache[2| = matcher(elem, context, Xml))) { 
/把 matcher 当前 元 素 结果 赋值 给 newCache[2]， 如 果 结 果 为 真 ， 返 回 tque， 否 则 
1/ 继 绥 通 历 
return true; 


} 


matcher 为 当前 词素 前 的 “终极 匹配 部 ”，combinator 为 位 置 词素 。 根 据 关系 选择 右 检 查 ， 如 果 是 没有 位 
置 词 素 的 选择 右 ， 如 贞 d.sub[name="checkbox'"]， ee 当前 节点 elem 是 否 匹 配 规则 即 可 。 
由 于 有 了 位 置 词素 ,那么 判断 的 时 候 就 不 能 简单 判断 当前 节点 ， 可 能 需要 判断 elem 的 兄弟 节点 或 者 父 
亲 节 点 是 否 依次 符合 规则 。 
这 是 一 个 递归 深度 搜索 的 过 程 ， 所 以 matchers 又 经 过 一 层 包 装 ， 然 后 使 用 相同 的 方式 递归 ， 直 到 
a 分 解 完 毕 。 
返回 的 名 结果 是 _ 个 根据 关系 选择 器 分 组 后 再 组 合 的 欢 套 和 民 深 的 财 包 因数 。 


3.7 超级 匹配 
通过 Exprfind[ type ] 找 出 选择 紫 最 右边 的 最 终 seed 种 子 合 集 ; 通过 Sizzle.compile 困 数 编译 其， 把 


tokenize 词法 元 素 编译 成 闭 包 函数 ; 使 用 superMatcher 超级 匹配 ， 以 最 佳 的 方式 从 seed 种 子 集合 筛选 出 需要 
的 数据 ， 也 就 是 通过 seed 与 compile 的 匹配 ， 得 出 最 终 的 结果 。 


3./.1 superMatcher 


superMatcher 并 不 是 一 个 直接 定义 的 方法 ， 它 通过 matcherFromGroupMatchers 方法 返回 的 一 个 Curry 化 
的 银 数 ， 但 是 最 后 执行 起 重要 作用 的 是 它 。 


compile( selector, match 儿 
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seed, 

Context, 

1documentIsHTML.. 

results. 

rsiblne.test( selector ) && testContext( context.parentNode ) | context 


E 
superMatcher 方法 会 根据 参数 seed 、expandContext 和 context 确定 一 个 起 始 的 查询 范围 。 
elems = seed || byElement && Expr.find["TAG"|( "*", outermost )， 


有 可 能 直接 从 seed 中 查询 过 滤 ， 也 有 可 能 在 context 或 者 context 的 父 市 点 范围 和 内。 如果 不是 从 seed 开始 ， 
那 只 能 把 整个 DOM 树 节 点 取出 来 过 滤 了， 把 整个 DOM 树 节 点 取出 来 过 滤 后 ， 它 会 先 执 行 Exprfind["TAG"] 
("*", outermost ) 这 名 代码 等 到 一 个 elems 集合 ( 数组 合集 )。 

context.getElementsByTagName( tag ): 


可 以 看 出 对 于 优化 选择 器 ， 最 右边 应 该 写 一 个 作用 域 的 搜索 范围 context 比较 好 。 
开始 遍历 这 个 seed 种 子 合集 : 
while ( (matcher = elementMatchers[]j++|) ) { 
if ( matcher( elem, context, Xml ) ) { 
results.push( elem ): 
break: 


} 


elementMatchers 就 是 通过 分 解 词法 器 生成 的 闭 包 顶 数 ， 也 就 是 “终极 匹配 器 ”。 

tokenize 选择 器 可 以 用 “,” 分 组 group， 所 以 就 有 个 合集 的 概念 。matcher 就 得 到 每 个 终极 匹配 器 。 通 
过 代码 能 看 出 matcher 方法 运行 的 结果 都 是 布尔 值 。 

对 里 面 的 元 素 逐 个 使 用 预先 生成 的 matcher 方法 做 匹配 ， 如 果 结 果 为 tue， 则 直接 将 元 素 推 人 返回 结果 
集 里 。 


3./.2 matcher 


matcher 是 elementMatcher 困 数 的 包装 ， 整 个 匹配 的 核心 代码 如 下 : 
tunction( elem, context, Xml ) { 
var 1= matchers.leneth: 
while (1- ) 1{ 
1 ( Imatchers[1|( elem, context, J 
return false: 


return true: 


Le 
Sizzle 引擎 的 解析 过 程 如 图 3.6 所 示 。 


se /9* 


Gp zy 以 入 门 到 精通 ( 微 课 精 纺 版 ) 


div > p+ div.sub Input[type= "checkbox "| 


parse 抽 出 seed， 香 组 tokenize 


tokenize 


div => p+ div.sub [type="checkbox"] 


抽出 seed 种 子 合集 input 
compile 编 译 困 数 


superMatcher 提 出 input 与 每 个 compile 进 行 匹 配 


results DOM 节 点 


图 3.6 Sizzle 引擎 的 解析 过 程 
第 1 步 ， 设计 CSS 选择 器 。 
div>> p+ div.sub mputltype="checkbox"| 
从 右边 剥离 出 原生 API 能 使 用 的 接口 属性 : 
context.getElementsBYJIagName( "input” ) 
找到 input， 因 为 只 可 以 使 用 TAG 查询 , 但 是 此 时 结果 是 个 合集 ， 故 引入 seed 的 概念 ， 称 为 种 子 合集 。 
第 2 步 ， 重组 选择 入 ， 去 掉 input， 得 到 新 的 tokens 词法 元 素 喻 希 表 。 
div>> p+ div.sub [type="checkbox"|' 


第 3 步 ， 调 用 matcherFromTokens 困 数 ， 根 据 关 系 选择 需 (">"," 空 "+ ) 分 组 ， 因 为 DOM 节点 都 


是 存在 关系 的 ， 所 以 引入 Exprrelative， 通 过 first:true 得 到 两 个 关系 的 “紧密 ”程度 ， 用 于 组 合 最 佳 的 峰 选 。 


按照 如 下 顺序 解析 ， 且 编译 闭 包 消 数 。 

编译 规则 : div > p + div.sub [type="checkbox"] 

编译 成 4 组 闭 包 师 数 ， 然 后 前 后 再 合并 组 合成 一 组 。 

div > 

P 十 

div.sub 

input[type="checkbox" | 

先 构造 一 组 编译 函数 : 

A: 抽出 div 元 素 ， 对 应 的 是 TAG 类 型 。 

B: 通过 Exprfilter 找到 对 应 匹配 的 处 理 苦 ， 返 回 一 个 财 包 处 理 符 ， 如 TAG 方法 。 
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"TAG": function( nodeNameSelector ) { 
var nodeName = nodeNameSelector.replace( runescape, funescape ).toLowerCase(): 
return nodeNameSelector 一 二 "*" ? 
tunction() { return true; } : 
function( elem ) { 
return elem.nodeName && elem .nodeName.toLowerCase() 一 nodeName: 
. 


}; 


C: 将 返回 的 Curry 方法 放 入 matchers 匹配 器 组 中 ， 继 续 分 解 。 
D: 抽出 子 元素 选 择 硕 >'， 对 应 的 类 型 为 type: ">"。 
E: 通过 Exprrelative 找到 elementMatcher 方法 ， 分 组 合并 多 个 词素 的 编译 图 数 。 
tunction( elem, context Xml ) { 
var 1= matchers.length:; 
while (i-- ) { 
1 ( Imatchers|[1|( elem, context xml ) )} { 
return false: 
} 
} 


执行 各 日 Exprfilter 匹配 中 的 判断 方法 ， 其 中 matcher 方法 运行 的 结 采 都 是 布尔 值 ， 所 以 这 里 只 返回 了 
一 个 组 合 闭 包 ， 通 过 这 个 筛选 闭 包 ,各 自 处 理 自己 内 部 的 元 素 。 | 

F: 返回 匹配 融 还 是 不 够 ， 因 为 没有 规范 搜索 范围 的 优先 级 ， 所 以 这 时 还 要 引入 addCombinator 方法 。 | 

G: 如 果 Exprrelative 和 first:true 两 个 关系 的 “紧密 ”程度 高 ， 则 返回 addCombinator。 

function( elem, context, Xml ) { 

while ( (elem = elem| dr |) ) { 
if (elem.nodeType =—= 1 || checkNonElements ) { 
return matcher( elem, context, Xml] ): 


} 
} | 

} | 

如 果 是 紧密 关系 的 位 置 词素 ， 找 到 第 一 个 亲密 的 节点 ， 用 终极 匹配 器 判断 这 个 节点 是 否 符合 前 面 的 
规则 。 | 


上 面 是 第 一 组 终极 匹配 器 的 生成 流程 ， 可 见 过 程 极 其 复杂 ， 被 包装 了 三 层 ， 依次 是 addCombinator、 
elementMatcher 和 Exprrelative。 

三 个 方法 符 套 处 理 。 然 后 继续 分 解 下 一 组 ， 遇 到 关系 选择 器 又 继续 依照 以 上 的 过 程 分 解 。 但 是 有 一 个 
不 同 的 地 方 ， 下 一 个 分 组 会 把 上 一 个 分 组 一 并 合并 ， 所 以 整个 关系 就 是 一 个 依赖 瞬 套 很 深 的 结构 。 

可 以 看 到 ,终极 匹配 融 其 实 只 有 一 个 团 包 , 但 是 有 内 山 很 深 的 分 组 闭 包 ,依照 从 无 往 右 依次 生成 团 
包 ， 然 后 把 上 一 组 闭 包 添加 到 下 一 组 闭 包 ， 就 跟 栈 是 一 种 后 进 先 出 的 数据 结构 一 样 处 理 ， 所 以 最 外 层 是 
type=["checkbox"]。 

再 返回 superMatcher 方法 的 人 处理 。 裔 历 seed 种 子 合集 ， 依 次 匹配 matchers 闭 包 孙 数 ， 传 人 每 个 seed 的 
元 素 与 之 匹配 ( 这 里 是 input )， 在 对 应 的 编 详 处 理 表 中 通过 对 input 的 处 理 ， 找 到 最 优 匹 配 结果 。 | 

function( elem, context, Xml ) { | 

var 1= matchers.leneth:; 
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zory 以 入 门 到 精通 ( 币 课 精 编 县 ) 


while ( 1-- ){ 
L( !matchers|1|( elem, context xml ) ) { 
returmn false: 


| Tetum true: 
Note 


| < 铀 注意 : i-- 表示 从 后 往 前 查找 ， 所 以 第 一 次 开始 匹配 的 是 : check: "checkbox"、name: "type"、operator "="。 


”找到 对 应 的 Att 处 理 方法 ， 源 代码 如 下 ， 


// 过 滤 晴 数 
filter: 1 
/ 属性 预 过 滤 
/name 是 属性 名 ，operator 是 操作 符 ，check 是 要 检查 的 值 
// 如 选择 器 [type="checkbox"] 中 ，name="type"，operator="="，check="checkbox" 
// 返回 布尔 值 
"ATTR": function (name, operator check) + 
1/ 返回 一 个 元 匹配 般 
// 返回 函数 ， 也 数 需要 参数 elem 
retum function (elem) 1 
/ 获取 elem 的 name 属性 
Var result = Slzzle.attr(elem, name): 
// 判断 是 否 存在 属性 值 
1f (result == null) + 
/ 如 果 操 作 符 是 不 等 号 ， 返 回 真 ， 因 为 当前 属性 为 空 ， 是 不 等 于 任何 值 的 
retum operator 一 一 “| 一 ; 


让 (Ioperaton { 1/ 如 果 没 有 操作 符 ， 那 就 直接 通过 规则 
/ 如 果 没 有 操作 符 ，result 不 为 空 ， 那 么 属性 存在 ， 返 回 true 
return true: 

} 


// 有 操作 符 ，result 不 为 空 
// 加 上 空格 ，check 后 面 会 加 上 空格 ,方便 比较 
result +="" 
return operator 一 一 "=" ? result 一 check : // 如 果 是 等 号 ， 判 断 目标 值 跟 当 前 属性 值 相 等 是 否 为 真 
operator 二 一 "!=" ? result ! 一 check :// 如 果 是 不 等 号 ， 判 断 目标 值 跟 当前 属性 值 不 相等 是 否 为 真 
operator 一 一" =" ? check &&resultindexOfchecl 一 一 0 :如 果 是 起 始 相 等 ， 判 断 目标 值 是 
/和 理 在 当前 属性 值 的 头 部 
operator ——= "*=" ? check && result.indexOftcheck) > -1 :// 这 样 解释 : lane*=en 匹配 <html 
// lane 一 "xXXXXenXXX"> 这 样 的 太 氮 


/slice ( -xxx.length ) 检测 结尾 
operator 一 二 "$=" ? check && result.slice(-check.length) — check :/ 如 果 是 未 尾 相 等 ， 
/判断 目标 值 是 否 
/在 当前 属性 值 的 
/末尾 
//check 后 面 有 空格 ， 所 以 匹配 会 正确 工作 
operator 一 二 "~ 一 ? (" "+result.replace(rwhitespace, " ")+" ").ndexOf(check)> -1 : 
// 这 样 解释 : lang~=en 匹配 <html lang="zh_CN en"> 这 样 的 节点 
/e.g. en- 
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operator =— "|=" ? result =—= Check || result.slice(0, check.length + 1) —= 
check 十 "-" :/ 这 样 解 释 : lane=|en 匹配 <html lane"en-US"> 这 样 的 节点 


false: 
EE 
} 
} 
例如 : 
Slizzle.attr( elem, name ) 


传人 elem 元 素 就 是 seed 中 的 input 元 素 ， 找 到 是 否 有 'type' 类 型 的 属性 ， 如 <input type="text">， 所 以 | 
第 一 次 匹配 input 就 出 错 了 ， 返 回 的 type 是 text， 而 不 是 需要 的 'checkbox'， 这 里 返回 的 结果 就 是 false， 所 
以 整个 处 理 就 直接 返回 。 
再 传人 第 二 个 input， 继 续 上 一 个 流程 ， 这 时 发 现 检 测 到 的 属性 : 


Var result = Sizzle.attr( elem, name ): 
result: "checkbox" 


此 时 满足 第 一 条 匹配 ， 然 后 继续 1= 0。 


Imatchers|1|( elem, context, Xml ) 


找到 第 0 个 编译 困 数 


1/ 生成 关系 选择 符 过滤 函 数 
function addCombimator(matcher, comblnator base) { 
Var dir = comblnator.d1 
skip = combimnator.next, 
key = skip || dr 
checkNonElements = base && key 一 二 "parentNode", 
doneName = donet+: 
return combimnator.first ? 
// 最 近 的 祖先 元 素 
/ 检查 最 近 的 祖先 /前 一 个 元 素 
1/ 返回 此 晴 数 作为 combinator 的 过 滤 函 数 
function (elem, context, xml) { 
while ((elem = elem|[di17])) { 
(elemnodeTIype —= 1 || checkNonElements) { 
// 如 果 遇 到 元 素 节 点 或 没有 父 节 点 ,返回 匹配 孙 数 
return matcher(elem, context, xml): 


addCombinator()， 源 代 人 码 如 下 : 


} 
} 


return false: 


Le 
/ 检查 所 有 祖先 /前面 的 元 素 
//first 不 存在 ， 返 回 此 函 数 
function (elem, context, xml) { 
var oldCache. uniqueCache., outerCache., 
newCache = [dirmns., doneName|: 
1/ 不 能 在 xml 节点 上 设置 任意 数据 ， 所 以 它们 不 会 从 组 合 占 缓存 中 获 益 


es B33. 


Js 以 入 门 到 精通 ( 币 课 精 编 县) 


1f (xml) { 
while ((elem = elem|[dir|)) { 
if (elem.nodelype —— 1 || checkNonFlements) { 
if (matcher(elem, context, xml)) { 
/判断 matcher 结果 ,返回 hue， 如 果 为 flse， 还 要 继续 遍历 
return true: 


} 
} else { 
while ((elem = elem[dir|)) { 
lf (elem.nodelype ——= 1 || checkNonElements) 1 

outerCache = elem|expando| | (elem|expando| = {1): 

// 获得、 创建 外 部 缓存 

/ 仅 支 持 正 9- 

1/ 保护 复制 的 attroperties (jQuery gh-1709 ) 

uniqueCache = outerCache[elem.uniquelD | || (outerCache|elem.unmiquelD| = {+):; 

1{ (skip && skip =—= elem.nodeName.toLowerCase()) { 
elem = elem| dir | || elem: 

+ else 1{ ((oldCache = uniqueCache|key|) && 
/把 outerCache[dir] 赋值 给 oldCache， 如 果 它 存在 ， 即 有 缓存 可 用 ， 继 续 
oldCache|0| 二 = dmns && oldcache| 1 | = doneName) 1 
/第 一 项 全 等 于 dinruns 日 第 二 项 全 等 于 doneName， 即 方向 与 结果 都 存在 ， 继 续 
/ 分 配给 newCache， 所 以 结果 反 向 传播 到 以 前 的 元 素 
retum (newCache|2| = oldCache|2|): 
// 把 这 个 缓存 第 三 项 传递 给 newCache[2] ( newCache 在 outerCache 中 ，outerCache 
/在 elem[expando] 中 ) 
/并 返回 它 作 为 结果 
// 这 一 项 代表 这 个 elem 在 当前 dir 和 doneName 下 macher 的 结果 


telse { 

//outerCache 不 存在 ， 即 第 一 次 明 历 到 这 个 元 素 

/重新 使 用 新 的 缓存 ， 所 以 结果 反 回 传播 到 以 前 的 元 素 

uniqueCache[key| = newCache: 

// 把 newCache 传递 给 outerCache[dir]， 即 存 人 elem[expando]， 建 立 缓存 

//match 意味 着 完成 ，fail 意味 着 必须 继续 检查 

1f ((ewCache[2| = matcher(elem, context, xml))) { 
/把 matcher 当前 元 素 结果 赋值 给 newCache[2]. 如 果 结 果 为 真 ， 返 回 true， 盏 
1/ 则 继续 裔 历 
return true:; 


如 采 是 不 紧密 的 位 置 关 系 ， 那 么 一 直 匹 配 到 true 为 止 。 例 如 祖 守 关系， 查找 父亲 广 点 直到 有 一 个 祖先 
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节 扣 符合 规则 为 止 。 
直接 递归 调用 代码 如 下 : 
matcher( elem, context, Xml ) 


就 是 下 一 组 闭 包 队列 ， 传 入 的 上 下 文 是 div.sub， 也 就 是 <input type="checkbox"> 的 父 节点 。 


function (elem, context, xml) { 
var 1= matchers.leneth:; 
/ 从 右 到 左 开始 匹配 
while (1--) { 
// 如 果 有 一 个 没 匹 配 中 ， 那 就 说 明 该 节点 elem 不 符合 规则 
1 (!'matchers|i|(elem, context, xml)) { 
return false: 


} 
return true: 


} 


这 样 递归 下 去 ， 一 层 一 层 地 匹配 ， 可 见 不 是 一 层 一 层 往 下 查 ， 而 是 一 层 一 层 向 上 做 匹配 、 过 滤 。Expr ， 
里 面 只 有 find 和 preFilter 返回 的 是 集合 。 | 


es 归口。 


定义 jQuery 对 象 


( 视频 讲解 : 47 分 钟 ) 


]Query 选择 器 条 用 CSS3 选择 器 语法 规范 ， 在 HIML 结构 中 可 以 快速 匹配 元 素 ， 
]Query 具有 使 用 便捷 、 功 能 强大 、 支 持 完 善 、 处 理 灵 活 等 优势 。]Query 选择 器 的 返回 值 
均 是 一 个 类 数组 的 jQuery 对 象 ， 如 果 没 有 匹配 元 素 ， 则 会 返回 一 个 空 的 类 数组 ， 因 此 
不 能 使 用 if($("tr")) 检测 jQuery 对 象 ， 而 应 该 使 用 if($("tr")length > 0) 进行 检测 。 

jQuery 选择 器 分 为 简单 选择 器 、 结 构 选 择 器 、 过 滤 选 择 器 、 属 性 选择 器 以 及 表单 
专用 选择 器 等 ， 本 章 将 分 别 讲解 每 类 选择 器 的 使 用 。 


【学 习 重 点 】 

bh 使 用 简单 选择 器 。 
| 使 用 结构 选择 器 。 
| 使 用 过 滤 选 择 器 。 
p 使 用 属性 选择 器 。 
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4.1 简单 选择 器 
简单 选择 器 包括 $ 种 类 型 . ID 选择 器 、 标 签 选 择 器 、 类 选择 器 、 通 配 选 择 吉 、 分 组 选择 器 。 


4.1.1 ID 选择 器 


JavaScript 提供 原生 的 getElementById0 方法 ， 可 以 在 DOM 中 匹配 指定 ID 元 素 。 用 法 如 下 : 

Var element = document.getElementBylId("1d"): 

该 方法 的 返回 值 为 所 匹配 元 素 的 对 象 ， 参 数值 为 字符 串 型 DD 值 ， 该 值 在 HTML 标签 中 通过 id 特性 设置 。 
jQuery 简化 了 JavaScript 原生 方法 的 操作 ， 通 过 一 个 简单 的 “#” 标 识 前 级 快速 匹配 指定 也 元 素 。 用 
JQuery("#1d") ; 

参数 id 为 字符 串 ， 表 示 标 签 的 id 属性 值 。 返 回 值 为 包含 匹配 id 的 元 素 的 jQuery 对 象 。 
【示例 1]】 使 用 jQuery 匹配 文档 中 ID 值 为 box 的 元 素 ， 并 设置 其 背景 色 为 红色 。 


<script> 

$(functionO{ // 页 面 初始 化 函数 
$("#box").css("background","red");  V 匹配 JD 值 为 box 的 元 素 ， 设 置 其 背景 色 为 红色 

1) 

</script> 


<div id="box"> 测试 盒子 </div> 


在 上 面 代码 中 ，$("#box") 图 数 包含 的 " 孝 ox" 参数 表示 了 D 选择 般 ，jQuery 构造 船 能 够 根据 这 个 选择 天 
准确 返回 包含 该 元 素 引用 的 jQuery 对 象 。 | 
在 ID 选择 震中 ， 如 果 包 含 特殊 字符 ， 可 以 使 用 双 和 斜 栖 对 特殊 字符 进行 转 义 。 
【示例 2】 页 面包 含 3 个 <div> 标签 ,它们 的 id 属性 值 都 包含 了 特殊 的 字符 。 如 果 不 进行 处 理 ，jQuery 
在 解析 时 会 引发 歧义 ， 因 此 可 以 使 用 如 下 方法 来 实现 准确 选择 ， 即 为 这 些 ID 选择 器 字符 串 添 加 双 斜 杠 前 
级 ， 以 便 对 这 些 特殊 的 字符 进行 转 义 。 
<script> | 
$(function(O) { 
$("#a\.b").css("color","red"): 
$("#aW\:b").css("color","red"): 
$C"#\[div\").css("color","red"): 
a 
<div 1d="a.b">div1l</div> 
<div 1d="a:b">dIv2</dIv> 
<dv 1d="|[div|"=>dIv3</dIv=> 


在 执行 jQuery0 了 商 数 时 ，jQuery 使 用 正则 表达 式 来 匹配 参数 值 ， 判 断 当 前 参数 是 否 为 ID 值 。 
ID: (7:Nw\aO0cO-WFFFF -NY 


ss Bf/* 
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而 正则 表达 式 对 于 特殊 字符 是 敏感 的 ， 要 避免 正则 表达 式 被 误解 ， 就 必须 进行 转 义 ,在 正则 表达 式 中 
一 般 通 过 双 斜 杠 来 转 义 特殊 字符 。 如 果 直 接 使 用 JavaScript 的 原生 方法 getElementById0 ， 就 不 用 考虑 这 个 
问题 。 
【示例 3】 示 例 2 中 的 示例 代码 可 以 改写 为 下 面 写法 。 
$(function() { 
document.getElementById("a.b").style.color = "red": 
document.getElementByld("a:b").style.color = "red": 
document.getElementByld("[div|").style.color = "red": 
1) 


4.1.2 ”标签 选择 前 


JavaScript 提供 原生 的 getElementsByTagName0 方法 ， 用 来 在 DOM 中 选择 指定 标签 类 型 的 元 素 。 用 法 
如 下 : 


var elements = document.getElementsByTaeName("taeName"):; 


jQuery 匹配 指定 标签 的 方法 比较 简单 ， 在 jQuery0 构造 旺 数 中 指定 标签 名 称 即 可 。 用 法 如 下 : 


JQuery("element"): 


参数 element 为 字符 串 ， 表 示 标 签 的 名 称 。 返 回 值 为 包含 匹配 标签 的 jQuery 对 象 。 与 ID 选择 髓 不 同 ， 
标签 选择 器 的 字符 串 不 需要 附加 标识 前 级 (# ) 

【示例 1】 使 用 jQuery 匹配 文档 中 所 有 的 <div> 标签 ， 并 定义 它们 的 字体 颜色 为 红色 。 

<script> 

$(function(){ 

$("div").css("color","red"); 

}) 

</script> 

<div>[ 标题 栏 ]</div> 

<div>[ 内 容 框 ]</div> 

<div>[ 页 脚 栏 ]</div> 


$("div") 表示 匹配 文档 中 所 有 的 <div> 标签 ， 并 返回 jQuery 对 象 ， 然 后 调用 jQuery 的 css0 方法 为 所 有 
匹配 的 <div> 标签 定义 红色 字体 。 

【示例 2】 如 果 使 用 JavaScript 原生 的 getElementsByTagName0 方法 匹配 文档 中 的 <div> 标签 ， 并 设置 
它们 的 前 景色 为 红色 ， 则 需要 使 用 循环 语句 遍历 返回 的 元 素 集 合 ， 并 逐一 设置 每 个 元 素 的 字体 样式 。 实 现 
代码 如 下 : 


<script> 

window.onload = functionO{ / 页 面 初始 化 函数 
var divs = document.getElementsByTagName("div")，// 返回 div 元 素 集合 
for(var 二 0:i<divslength:iHH){ /遍历 div 元 素 集 合 
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divs[il.style.color = "red": /设置 div 元 素 的 前 景色 为 红色 | 
: | 
} | 


</script> 


此 时 $("div") 与 document.getElementsByTagName("div") 的 运行 结果 是 一 样 的 ， 都 返回 一 个 元 素 集 合 对 象 。 
【示例 3】 用 户 还 可 以 混合 使 用 jQuery 代码 和 JavaScript 代码 。 


<script> | 
window.onload = function(O{ // 使 用 JavaScript 方法 初始 化 页 面 处理 函 数 
Var divs = $("div"): // 使 用 jQuery 方法 选择 所 有 div 元 素 
for(var i=0:i<divs.leneth:i++){ / 使 用 JavaScript 方法 遍历 返回 的 jQuery 结果 对 象 
divs|1|.style.color = "Ted : | 

} | 

} | 
</script> | 


从 执行 效率 的 角度 考虑 ， 应 多 使 用 JavaScript 原生 的 getElementsByTagName() 方法 来 选择 同类 型 的 元 
素 。 在 复杂 的 jQuery 编程 环境 中 ， 和 能 人 使 用 getElementsByTagName0 方法 要 比 直接 使 用 $0 方法 高 效 。 


4.1.3 ”类 选择 器 


HTML 5 新 增 getElementsByClassName0 方法 ， 使 用 该 方法 可 ee = 的 元 素 。 该 方法 可 以 接收 
一 个 字符 串 参数 ， 包 合 一 个 或 多 个 类 名 ， 类 名 通过 空格 分 隔 ， 不 分 先后 顺序 ， 返 回 值 为 带 有 指定 类 的 所 有 
元 素 的 集合 。 | 
支持 浏览 占 包 括 正 9+、Firefox 3.0+、Safari 3+、Chrome 和 Opera 9.5+。 
【示例 1】 使 用 document.getFlementsByClassName("red") 方法 选择 文档 中 所 有 包含 red 类 的 元 素 。 
<=script> 
$(function(){ 
Var divs = document.getElementsByClassName("red"): 
for(var 1=0; 1<divs.leneth:1++){ 
console.log(divs[1|.InnerHTML): 


b 
}) 
</script> 


<div class="red"> 红 盒子 </div> 
<div class="blue red"> 蓝 人 盒子 </div> 
<div class="green Ted"> 绿 侈 于 </div> 


【示例 2】 先 使 用 document.getFlementById("box") 方法 获取 <div id="box">， 然 后 在 它 下 面 使 用 getElements- | 
ByClassName("blue red") 选择 同时 包含 red 和 blue 类 的 元 素 。 | 
<script> | 
$(function(O{ 
var divs = document.getElementByld("box").getElementsByClassName("blue red"): 
for(var 1=0; 1<divs.lenegth:1++){ 
console.log(divs|[1|.innerHTIML): 
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4) 
</script> 
<div 1d="box"> 
<dv class="blue red ereen">blue red ereen</dIiv> 
</div> 


六 提示 : 在 document 对 象 上 调用 getElementsByClassName0 会 返回 与 类 名 匹配 的 所 有 元 素 ， 在 元 素 上 调 
用 该 方法 只 会 返回 后 代 元 素 中 匹配 的 元 素 。 


【示例 3】 如 果 要 支持 早期 浏览 上 ， 用 户 可 以 扩展 getElementsByClassName( 方法 。 实 现代 码 如 下 : 
document.getElementsByClassName = function(className) { 


var el = [], 
_el= document.getElementsByTagName(*"): ”// 获取 所 有 元 素 
for (var i=0: i< el.length: i++ ){ /遍历 元 素 集合 
让 ( el[il.className — className ) { /获取 相同 类 名 的 元 素 
ellel.leneth| = ellil: 
} 
} 
return el: 


} 


使 用 自 定义 类 选择 冀 方 法 getElementsByClassName0 选择 文档 中 类 名 为 red 的 所 有 元 素 ， 并 设置 它们 的 
前 章 色 为 红色 oO 


window.onload = function({ // 页 面 初 始 化 果 数 
var red = document.getElementsByClassName("red"); // 返回 div 元 素 集合 
for(var i=0, l=red.length: i< 1: i++)f /过 历 div 元 素 集 合 
red[il.style.color = "red": /设置 div 元 素 的 前 景色 为 红色 
} 
} 
在 jQuery 中 ， 类 选择 硕 的 字符 串 需 要 附加 标识 前 绥 (. )。 用 法 如 下 : 
J]JQuery(".className"): 


参数 className 为 字符 早 ， 表 示 标 签 的 class 属性 值 ， 前 级 符号 “.” 表 示 该 选择 髓 为 类 选择 右 。 返 回 值 
为 包含 匹配 className 的 元 素 的 jQuery 对 象 。 

【示例 4】 使 用 jQuery 构造 硕 匹 配 文 档 中 所 有 类 名 为 red 的 标签 ， 并 定义 它们 的 字体 颜色 为 红色 。 

<script> 

$(function(){ 

$(".red").css("color","red"): 

}) 

</script> 

<div class="red"> 红 盒 子 </div> 

<div class="blue red"> 蓝 盒 子 </div> 

<div class="gTreen red"> 绿 盒子 </div> 
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4.1.4 ” 通 配 迁 择 痢 


在 JavaScript 中 ， 使 用 document.getElementsByTagName("*") 可 以 匹配 文档 中 的 所 有 元 素 。jQuery 也 支 
持 通 配 选 择 器 ， 该 选择 器 能 够 匹配 指定 上 下 文中 的 所 有 元 素 。 用 法 如 下 : 
JQuery("™"); 


参数 “*” 为 字符 串 ， 表 示 将 匹配 指定 范围 内 的 所 有 标签 元 素 。 
【示例 1】 匹 配 文档 中 <body> 标签 下 包含 的 所 有 标签 ， 然 后 定义 所 有 标签 包含 的 字体 显示 为 红色 。 
<script> 
$(function(){ 
$("body *").css("color","red"); 
月 
</script> 
<div>[ 标题 栏 ]</div> 
<div>[ 内 容 框 ]</div> 
<div>[ 页 脚 栏 ]</div> 


【示例 2】 针 对 示例 1， 可 以 使 用 如 下 JavaScript 原生 方法 实现 相同 的 设计 效果 。 
$(functionO{ 
var all = document.getElementsByTaeName("*"):; 
for(var 1=0: 1<all.length:; HH){ 
alllil.style.color = "red": 
} 
}) 


更 高 效 的 方法 是 把 JavaScript 原生 方法 和 jQuery 迭代 操作 相 结 合 ， 这 样 可 以 提高 代 公 执行 效率 ， 也 不 
会 多 写 很 多 代码 。 

【示例 3】 使 用 JavaScript 原生 方法 获取 页 面 中 的 所 有 元 素 ， 然 后 把 这 个 DOM 元 素 集合 传递 给 jQuery0 
田 数 。 把 JavaScript 数组 集合 封装 为 jQuery 对 象 的 类 数组 集合 ， 然 后 便 助 jQuery 的 css0 方法 可 以 快速 定义 
样式 ， 从 而 提高 整个 程序 的 执行 速度 。 

$(functionO{ 

var all = document.getElementsByTaeName("*"): 
$(all).css("color"."red"): 

}) 


4.1.5 分 组 选择 痢 

分 组 选择 船 通 过 逗号 分 隅 符 来 分 隔 多 个 不 同 的 选择 此 ， 这 些 于 选择 天 可 以 是 任意 类 型 的 ， 也 可 以 是 复 
合 选择 硕 。 用 法 如 下 : 

]Query("selector] ,selector2.,....selectorN") : 


参数 selectorl 、selector2 、selectorN 为 字符 串 ， 表 示 多 个 选择 带 ， 这 些 选 择 融 没有 数量 限制 ， 它 们 通过 
有 逗号 进行 分 隔 。 当 执行 分 组 选择 顺 之 后 ， 返 回 的 jQuery 对 象 将 包含 每 个 选择 需 匹 配 的 元 素 。jQuery 在 执行 
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分 组 选择 带 匹 配 时 ， 先 是 逐一 匹配 每 个 选择 着 ， 然 后 将 匹配 的 元 素 合 并 到 一 个 jQuery 对 象 中 返回 。 
【示例 】 首 先 利 用 分 组 选择 器 匹配 文档 中 包含 的 不 同 标签 ， 然 后 定义 所 有 标签 包含 的 字体 显示 为 红色 。 


<script> 
$(fimction(){ 
$("h2, #Wwrap, span.red, [title='text"™).css("color","red"): 
1) 
</script> 
<h2>H2</h2> 
<dlv 1d="wrap">DIV</div> 
<=span class="red"~>SPAN</span> 
<p title="text">P</p> 


4.1.6 源码 解析 


为 了 提高 匹配 效率 ，jQuery 对 于 简单 的 选择 右 进 行 提 前 匹配 ， 直 接 调用 JavaScript 原生 方法 来 完成 任 
务 ， 避 人 免 在 复杂 的 循环 逻辑 中 浪费 时 间 。 
在 第 2 章 jQuery 框架 中 ,介绍 了 jQuery 的 入 口 函 数 init0。init0 函数 在 正式 调用 Sizzle 引擎 之 前 先 对 
ID 选择 希 、 标 签 选择 项 和 类 选择 货 进 行 处 理 ， 直 接 调用 原生 方法 ,这样 能 够 提高 执行 效率 ， 具 体 说 明 请 参 
考 2.2 三 内 容 。 
实际 上 ， 在 Sizzle 引擎 接口 函数 中 也 是 先 对 简单 的 选择 器 提前 进行 处 理 ， 避 免 对 简单 选择 器 进行 深度 
处 理 。 具 体 源码 如 下 : 
// 选择 器 引擎 入 口 ， 查 找 与 选择 器 表达 式 selector 匹配 的 元 素 集合 
function Sizzle(selector, context, results, seed) { 
var m, 1, elem, nld, match, eroups, newSelector, 
newC Context = context && context.ownerDocument, 
// nodeType 默认 为 9， 因为 context 默认 为 document 
nodeType = context ? context.nodeType : 9: 
results = results || [|: 
1/ 从 无 效 选 择 硕 或 上 下 文 的 调用 中 提前 返回 
1{ (typeotf selector !— "strine" || !selector || 
nodelype !== 1] && nodelype !== 9 && nodeType !== 11) 1 
return results: 
} 
// 尝试 在 HIML 文档 中 快速 找到 操作 ( 而 不 是 过 滤 咽 ) 
/seed 不 存在 
lf (Iseed) { 
1/ 如果 上 下 文 存在 ， 获 取 context.ownerDocument 或 context， 否 则 获取 preferredDoc 
1/ 再 比较 是 否 与 document 相同 ， 不 同 就 调用 setDocument (context) 
It((context ? context.ownerDocument || context : preferredDoc) !— document) 1 
setDocument(context): 


1/ 获得 context 

context = context || document: 
// 如 果 为 HTML 文档 类 型 
if (documentIsHTML) { 
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/ 如 果 选 择 般 非常 简单 ， 请 尝试 使 用 get*By* 的 DOM 方法 
/除了 DocumentFrasgment 上 下 文 ， 方 法 不 存在 ) 
lf (nodeType '=—— 11 &é& (match = rquickExpr.exec(selector))) { 
/TD 选择 骨 
//selector 只 存在 三 种 选择 器 的 情况 ( id，tag，class ) 下 的 快速 处 理 方 法 
//context 类 型 不 是 DocumentFragment， 且 selector 中 匹配 rquickExpr 
/ 先 处 理 ID 选择 项 ， 有 效 缩小 查找 范围 ， 提 高 速度 
i ((m= match[1])) 1 
//context 是 Document 类 型 
/ 第 一 个 捕获 组 存在 ， 即 存在 IDD 选择 带 
if (nodeType =—— 9) { 
1{ ((elem = context.getElementById(m))) { 
//getElementByld can match elements by name lnstead of ID 
// 判断 id 是 否 与 捕获 组 1 相同 ， 用 来 过 滤 name 属性 为 m， 但 是 id 不 是 m 的 元 素 
i (elem.1d 一 一 Im) 1 
results.push(elem); 
return results: 
} 
else { 
/melem 不 存在 
return results: 


} 
/上 下 文 不 是 Document 类 型 
} else { 
1{ (newContext KK (elem = newContext.getElementById(m)) && 

contains(context, elem) && 
elem.1d—=m)1 
/上下文 不 是 Document 类 型 ， 如 果 context.ownerDocument 存在 日 其 中 存在 idmame 
// 为 m 的 元 素 
// 且 该 元 素 是 context 的 子 元 素 ， 且 该 元 素 的 id 为 m 
/添加 elem 到 结果 集 ， 返 回 结果 
results.push(elem): 
return results: 


} 

} 

/ 标签 选择 骨 

+} else 1{ (match[2|) +{ 
// 如 果 标 签名 存在 第 二 个 捕获 组 
// 使 用 getElementsByTagName 返回 内 容 并 添加 到 结果 集 
push.apply(results, context.getElementsByTaeName(selector)): 
return results; 

// 类 选择 器 

/处 理 最 慢 ， 放 到 最 后 

+ else 1{ ((m = match|3|) && support.getElementsByClassName &c& 
context.getElementsByClassName) 1 
/第 三 个 捕获 组 存在 内 容 ， 即 类 选择 器 ; 而 且 浏 览 紫 支持 getElementsByClassName 
push.apply(results. context.getElementsByClassName(m)): 
return results: 


* O33. 
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// 利用 querySelectorAll 
1f (support.qsa && 
IcompllerCachelselector + " "| 上 && 
(IrbueeyQSA | IrbugeyQSA .test(selector))) { 
/浏览 器 支持 querySelectorAll 日 rtbbugeyQSA 不 存在 或 selector 没有 与 tbuggyQSA 匹配 的 
if (nodeType !=— 1) { 
newContext = context: 
newSelector = selector: 
+ else 1{ (context.nodeName.toLowerCase() !=— "object") { 
//context 为 元 素 节 点 ， 节 点 名 不 是 object 
1f{ ((nid = context.getAttribute("1d"))) { 
1/ 如 来 上 下 文 有 id 属性 ， 赋 给 nid 
// 修改 mid 的 值 ， 将 换 其 中 的 单 引 号 和 和 斜 杠 为 $& 
nid = nid.replace(rcssescape, tcssescape): 
} else { 
1/ 没有 id 属 性， 则 给 上 下 文 设置 id 属性 为 nid， 即 sizzle+ 数字 (时间 .tostring ) 
1/ 这样 可 保证 context 有 id 属 性， 让 QSA 正常 工作 
context.setAttribute("1d", (nid = expando)): 
} 
// 对 selector 分 组 
2roups = tokenize(selector); 
1= groups.leneth: 
while (1--) { 
// 给 分 组 的 每 个 选择 器 添加 头 部 nid 属性 选择 器 
groups[i| = "#"+nid+" "+ toSelector(eroups[i]): 
} 
newSelector = eroups.Jom(","); 
/扩展 兄弟 选择 船 的 上 下 文 
// 如 果 selector 存在 +、~ 兄弟 选择 器 ， 且 上 下 文 的 父 节 点 是 符合 要 求 的 上 下 文 
/ (看 testContext 测试 参数 是 否 有 getElementsByTageName， 返 回 参 数 本 刁 或 false ) 
/ 儿 退回 context.parentNode 
// 否则 返回 context 本 刁 
newContext = Tslblingtest(selectoT) && testContext(context.parentNode) || 
context: 


1{f (newSelector) { 
/ 如果 newSelector 存在 
try 1 
/使 用 QSA 得 到 结果 
push.apply(results, 
newContext.querySelectorAll(newSelector) 
| 
return Tesults: 
+ catch (qsaEiror) { } finally 1 
// 如 果 mid 标识 符 为 空 ， 移 除 上 下 文 id 属性 
L (nid 一 二 expando) { 
context.removeAttribute("1d"): 
} 
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} 


} 
// 其 他 情况 调用 select 函数 ， 去 掉 selector 前 后 的 空白 作为 参数 
return select(selector.replace(rtrim, "$1"), context, results, seed): 


| 
分 组 选择 器 的 实现 思路 是 这 样 的 。 首 先 ， 在 Sizzle0 构造 器 函数 中 获取 选择 器 字符 串 ， 并 通过 下 面 正则 / 
表达 式 模 式 进行 匹配 。 | 


var chunker = 人 (CGO LED A™ "NNN >+~,0ND H+ ~ DOs™.s™)/8g, | 
然后 把 该 正则 表达 式 的 下 标 位 置 恢复 到 初始 化 位 置 。 根 据 选 择 带 字符 串 中 的 逗号 作为 分 阳 符 ， 把 选择 | 


器 字符 串 分 隔 开 ， 然 后 分 别 推 人 parts 数组 中 。 | 
最 后 ， 通 过 条 件 语句 分 别 判断 parts 数组 的 长 度 ， 如 果 长 度 大 于 1， 则 重复 调用 Sizzle0 函数 ， 并 分 析 

第 一 个 逗号 后 面 的 选择 器 字符 串 ， 依 此 类 推 。 | 
| 


4.2 关系 选择 器 


关系 选择 天 能 够 根据 元 素 之 间 的 结构 关系 进行 匹配 ， 主 要 包括 包含 选择 项、 于 选择 船 、 相 邻 选择 秀和 


兄弟 选择 器 ， 说 明 如 表 4.1 所 示 。 
表 4.1 关系 选择 器 
选 择 蕴 说 有明 


在 给 定 的 祖先 元 素 下 匹配 所 有 的 后 代 元 素 。ancestor 表示 任何 有 效 选 择 些 ，descendant 表示 
ancestor descendant | 用 以 匹配 元 素 的 选择 器 ， 并 且 它 是 第 一 个 选择 器 的 后 代 元 素 

例如 ，$("form input") 可 以 匹配 表单 下 的 所 有 input 元 素 

在 给 定 的 父 元 素 下 匹配 所 有 子 元 素 。parent 表示 任何 有 效 选 择 器 ，child 表示 用 以 匹配 元 素 
parent > chlld 的 选择 器 ， 并 且 它 是 第 一 个 选择 器 的 子 元 素 

例如 ，$("form > input") 可 以 匹配 表单 下 的 所 有 子 级 input 元 素 

匹配 所 有 紧 接 在 prev 元 系 后 的 next 元 素 。Pprev 表示 任何 有 效 选 择 般 ，next 表示 一 个 有 效 选 
prev + next 择 器 并 且 紧 接着 第 一 个 选择 器 

例如 ，S$("label 十 input") 可 以 匹配 所 有 跟 在 label 后 面 的 input 元 素 

匹配 prev 元素 之 后 的 所 有 siblings 元 素 .。 prev 表示 任何 有 效 选 择 器 ,siblings 表示 一 个 选择 髓 ， 
prev ~ siblings 并 且 它 作为 第 一 个 选择 天 的 同辈 

例如 ，$Cform ~ input" 可 以 匹配 所 有 与 表单 同辈 的 input 元素 


【示例 1】 首先 在 文档 中 插入 3 个 文本 框 ， 它 们 分 别 位 于 <form> 标签 内 和 外 ， 其 中 第 一 个 和 第 二 个 位 
于 <form> 标签 内 ， 第 三 个 位 于 <form> 标签 外 。 第 一 个 和 第 二 个 文本 框 分 别处 于 不 同 的 DOM 层级 中 。 然 
后 使 用 包含 选择 器 匹配 <form> 标签 包含 的 所 有 <input> 标签 ， 并 定义 被 包含 的 文本 框 边框 显示 为 红色 , 背 ， 
景色 为 蓝 色 ， 预 览 效果 如 图 4.1 所 示 。 


* 昌 口 。 
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<script> 
$(function(){ 
$("form mput").css({"border":"solid 1px red","backeround":"blue"}): 


<fieldset> 
<label> 包含 的 子 文本 框 
<Inpnut /> 
</label> 
<fieldset> 
<label> 包含 的 孙 文 本 框 
<InDut /> 
</label> 
</fileldset> 
</fieldset> 
</form> 
<label> 非 包含 的 文本 框 
<nput /> 
</label> 


os 重 cyuseraBWDocume - x 
也 襄 的 子 文本 框 攻 了 汪汪 到 是 到 到 


忆 语 的 逢 区 林 芋 生生 
非 包 名 的 次 本 框 [| 


图 4.1 包含 选择 售 有 的 应 用 


”< 全 注意 : 包含 选择 器 不 受 包含 结构 的 层级 限制 ， 即 被 包含 在 第 一 个 选择 器 中 的 所 有 匹配 第 二 个 选择 器 的 
元 素 都 将 被 返回 。 


【示例 2】 首先 在 文档 中 插入 3 幅 图 片 ， 它 们 分 别 位 于 <div> 标签 内 和 外 ， 其 中 第 一 幅 和 第 二 幅 位 于 <div> 
标签 内 ， 第 三 幅 位 于 <div> 标签 外 。 第 一 个 和 第 二 个 文本 框 分 别处 于 不 同 的 DOM 层级 中 。 然 后 使 用 于 选择 天 
匹配 <div> 标签 包含 的 <img> 了 于 标签 ， 并 定义 匹配 的 子 标签 显示 为 红色 粗 边 框 ， 预 览 效 果 如 图 4.2 所 示 。 
<script> 
$(function(){ 
$("div > 1meg").css("border","solld Spx red"): 
}) 
</script> 
<div> 
<span><1meg src~—"Images/be.jpe" /></span> 
<Imeg strc="images/be.jpe”" /> 
</div> 
<Ime src="lmages/be.jpe" /> 


| < 佣 注意 : 子 选 择 器 与 包含 选择 器 在 匹配 结果 集中 有 重合 的 部 分 ， 但 是 包含 选择 器 能 够 匹配 更 多 的 元 素 ， 
| 除了 子 元 素 ， 还 包括 所 有 许 套 的 元 素 。 
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【示例 3】 首 先 在 文档 中 插入 4 幅 图 片 ， 分 别 位 于 <div> 标签 内 和 外 ， 其 中 第 一 幅 和 第 二 幅 位 于 <div> 
标签 内 ， 第 三 幅 和 第 四 幅 位 于 <div> 标签 外 。 第 一 个 和 第 二 个 文本 框 分 别处 于 不 同 的 DOM 层级 中 。 然 后 使 
用 相 邻 选择 器 匹配 <div> 标签 后 相 邻 的 <img> 同 级 标签 ， 并 定义 匹配 的 <img> 标签 显示 为 红色 粗 边框 , 预 
览 效果 如 图 4.3 所 示 。 

<script> 

$(function(O{ 

$("div + ime").css("border","solid Spx red"): 


7 

</script> 

<div> 
<span><lmg src="i1magpes/bg.jpe" /></span> 
<lmg src="images/bg.jpg" /> 

</div> 

<1mg src="images/bg.jpg" /> 

<1mg src="l1mages/bg.jpe" /> 


图 4.2 于 选择 带 的 应 用 图 43 相 邻 选择 硕 的 应 用 


< 邱 注意 : 与 子 选择 器 和 包含 选择 器 不 同 ， 从 结构 上 分 析 相 邻 选 择 器 是 在 同 级 结构 上 进行 匹配 和 过 滤 元 
素 ， 而 子 选 择 器 和 包含 选择 器 是 在 包含 的 内 部 结构 中 过 滤 元 素 。 | 


【示例 4】 首 先 在 文档 中 插入 4 幅 图 片 ， 它 们 分 别 位 于 <div> 标签 内 和 外 ， 其 中 第 一 幅 和 第 二 幅 位 于 
<div> 标签 内 ， 第 三 幅 和 第 四 幅 位 于 <div> 标签 外 。 第 一 个 和 第 二 个 文本 框 分 别处 于 不 同 的 DOM 层级 中 。 
然后 使 用 兄弟 选择 天 匹配 <div> 标签 后 同 级 的 <img> 标签 ， 并 定义 匹配 的 <img> 标签 显示 为 红色 粗 边 框 ， 
预览 效果 如 图 4.4 所 示 。 
<script> 
$(function(){ 
$("div ~ 1mg").css("border","solid Spx red"): 
1) 
</script> 
<div> 
<span><1meg src="lImages/be.jpe" /></span> 
<1mg src="i1mages/bg.jpg" /> 
</div> 
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<Ime src="lmages/be.jpe" /> 
<Ime src="l1mages/be.jpe" /> 


< 铺 注意 : 从 结构 上 分 析 ， 兄 第 选择 器 是 在 同 级 结构 上 进行 匹配 和 过 滤 元 素 ， 而 子 选 择 器 和 包含 选择 器 是 
在 包含 的 内 部 结构 中 过 滤 元 素 。 从 这 点 分 析 ， 兄 弟 选 择 器 与 相 邻 选择 器 类 似 ， 但 是 兄弟 选择 器 
能 够 匹配 更 多 的 元 素 ， 除 了 相 邻 的 同 级 元 素 外 ， 还 包括 所 有 不 相 邻 的 同 级 元 素 。 


【示例 5】 利 用 jQuery 定义 的 关系 选择 器 控制 HTML 文档 各 级 元 素 的 样式 。 虽 然 这 些 结构 没有 定义 记 
或 class 属性 ， 但 是 并 不 影响 用 户 方便 、 精 确 地 控制 文档 样式 ， 演 示 效 果 如 图 4.5 所 示 。 


<script> 
$(function(){ 
$("div").css("border", "solid 1px red"): 1 控制 文档 中 所 有 div 元 素 
$("div > div").css("margin", "2em"); /* 控制 div 元 素 包 含 的 div 子 元 素 ， 实 际 上 它 与 div 包含 选择 右 所 匹配 的 元 
素 是 相同 的 */ 
$("div div").css("backeround", "#ff0"): / 控制 最 外 层 div 元 素 包 含 的 所 有 div 元 素 
$("div div div").css("backeground", "#f0f"): _W 控制 第 三 屋 及 其 以 内 的 div 元 素 
$("div + p").css("margin", "2em"); / 控制 div 元 素 相 邻 的 pp 元素 
$("div:eq(1) ~ p").css("backeround", "blue"):; // 控制 div 元 素 后 面 并 列 的 所 有 p 元 素 
py 
</script> 
<div> 一 级 div 元 素 
<div> 二 级 div 元 素 
<div> 
三 级 div 元 素 
</div> 
<p> 段落 文本 11</p> 
<p> 段落 文本 12</p> 
</div> 
<p> 段落 文本 21</p> 
<p> 段落 文本 22</p> 
</qIV> 
<p> 段落 文本 31</p> 
<p> 段落 文本 32</p> 


和 TO ETATTT PR 


段 蒂 记 本 11 


段落 区 本 二 


- 下 
/| | 《/ 动 | 身 


图 4.4 ”兄弟 选择 器 的 应 用 图 4.5 关系 选择 器 演示 效果 
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在 关系 选择 器 中 , 左 、 右 两 个 子 选择 器 可 以 为 任何 形式 的 选择 器 ， 可 以 是 简单 选择 器 ， 也 可 以 是 复合 
选择 器 ， 甚 至 是 关系 选择 器 。 例 如 ，$("div div div") 可 以 有 两 种 理解 : "div div" 表示 子 包含 选择 器 ,位 于 左 
侧 ， 作 为 父 包含 选择 器 的 包含 对 象 ， 而 第 三 个 "div" 表示 被 包含 的 对 象 ， 它 是 一 个 简单 选择 器 ; 或 者 "div” 
表示 简单 选择 器 ， 位 于 左 侧 ， 作 为 父 包 含 选择 器 的 包含 对 象 ， 而 "div div" 表示 被 包含 的 对 象 ， 它 是 一 个 子 
包含 选择 器 。 


4.3 伪 类 选择 器 


jQuery 伪 类 选择 全 是 CSS 选择 船 的 核心 部 分 ， 也 是 使 用 最 灵活 、 源 但 最 复 洒 的 部 分 。 


4.3.1 子 选 择 关 
子 选 择 器 就 是 通过 当前 匹配 元 素 选择 该 元 素 包 含 的 特定 子 元 素 。 子 选择 器 主要 包括 4 种 类 型 ， 说 明 如 
表 4.2 所 示 。 
表 4.2 子 选 择 希 
选 择 希 说 朋 
-nth-child 匹配 其 父 元 素 下 的 第 入 个子 或 奇偶 元 素 
匹配 第 一 个 子 元 素 


人 first 选择 器 只 匹配 一 个 元 素 ， 而 :frstchild 选择 符 将 为 每 个 父 元 素 匹配 一 个 子 元 素 
Po 匹配 最 后 一 个 子 元 素 
站 last 选择 器 只 匹配 一 个 元 素 ， 而 :last-child 选择 符 将 为 每 个 父 元 素 匹 配 一 个 子 元 素 
No 如 果 某 个 元 素 是 父 元 素 中 唯一 的 子 元 素 ， 那 将 会 被 匹配 ， 如 果 父 元 素 中 含有 其 他 元 素 ， 那 
a 将 不 会 被 匹配 
-eq(index) 选择 器 只 能 够 匹配 一 个 元 素 ， 而 :nth-child 能 够 为 每 个 父 元 素 匹 配子 元 素 。:nth-child 是 从 1 
开始 的 ， 而 :eq0 是 从 0 算 起 的 。 下 列表 达 式 都 是 可 以 使 用 的 。 | 
nth-child(even) 1/ 匹配 偶数 位 元 素 | 
nth-child(odd) /匹配 奇数 位 元 素 
-nth-child(3n) // 匹配 第 三 个 及 其 后 面 间隔 3 的 每 个 元 素 
-nth-child(2) 1/ 匹配 第 二 个 元 素 
nth-child(3n+1) // 匹配 第 一 个 及 其 后 面 间隔 3 的 每 个 元 素 
:nth-child(3n+2) // 匹配 第 二 个 及 其 后 面 间隔 3 的 每 个 元 素 | 
【示例 】 利 用 子 选择 器 分 别 匹配 不 同位 置 上 的 荆 元 素 ， 并 为 其 设计 不 同 的 样式 ， 演 示 效 果 如 图 4.6 所 示 。 | 
<script> | 
$(function(){ 


$("li:first-child").css("color", "red"): 
$("li:last-child").css("color", "blue"): 
$("li:nth-child(1)").css("backeround", "#ff6"): 
$("li:nth-child(2n)").css("backeround", "#6ff"): 


* OQ. 
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}) 
</script> 
<ul> 
<] 户 己 所 不 和 欲 , 勿 施 于 人 。 一 一 《论语 》</Ii> 
<li> 天 行 健 ， 君 子 以 自强 不 息 。 一 一 《周易 》</li> 
<] 户 勿 以 恶 小 而 为 之 ， 勿 以 善 小 而 不 为 。 一 一 《三 国志 》</ 户 
<li> 君子 成 人 之 美 ， 不成 人 之 晋 。 小 人 反 是 。 一 一 《论语 》 <i> 
</ul> 


KT 自强 不 起 《< 周 史 >》 
亚 小 而 为 之 ， ER < 三 > 
子 成 人 之 美 ” 不 成 人 之 恕 。 小 信 反 是 。 《论语 》 


图 4.6 于 选择 合 的 应 用 


4.3.2 位置 选择 器 


位 置 选择 硕 主 要 是 根据 编号 和 排 位 第 选 特定 位 置 上 的 元 素 ， 或 者 过 滤 抒 特定 元 素 。 位 置 选择 硕 详 细 说 


明 如 表 4.3 所 示 。 
表 4.3 位 置 选择 器 
选 择 器 说 明 
:first 匹配 找到 的 第 一 个 元 素 。 例 如 ，$("tr:first") 表示 匹配 表格 的 第 一 行 
:last 匹配 找到 的 最 后 一 个 元 素 。 例 如 ，$("tr:last") 表示 匹配 表格 的 最 后 一 行 


去 除 所 有 与 给 定 选 择 顺 匹配 的 元 素 。 注意 , 在 jQuery 1.3 中 , 已 经 文 持 复 杂 选 择 肯 了， 如 :not(div a) 


™ 和 :not(div,a)。 例 如 ，$("input:not(:checked)") 可 以 匹配 所 有 未 选中 的 input 元 素 

匹配 所 有 索引 值 为 偶数 的 元 素 ， 从 0 开始 计数 。 例 如 ,$C("treven") 可 以 匹配 表格 的 第 1、3、5 行 ( 索 
引 值 为 0. 2. 4. … ) 

匹配 所 有 索引 信 为 奇数 的 元 素 ， 从 0 开始 计数 。 例 如 , $("tr:odd") 可 以 匹配 表格 的 第 2、4、6 行 ( 索 
引 值 为 1, 3, 5, … ) 

:ed 匹配 一 个 给 定 索 引 值 的 元 素 ， 从 0 开始 计数 。 例 如 ，S$("tr:eq(0)") 可 以 匹配 第 1 行 表 格 行 

:2t 匹配 所 有 大 于 给 定 索引 值 的 元 素 ， 从 0 开始 计数 。 例 如 ，sS("tr:gt(0)") 可 以 匹配 第 2 行 及 其 后 面 行 

:1t 匹配 所 有 小 于 给 定 索引 值 的 元 素 。 例 如 ，$("tr:gt(1)") 可 以 匹配 第 1 行 及 其 后 面 行 

:header 匹配 hl1、h2、h3 之 类 的 标题 元 素 


:animated 匹配 所 有 正在 执行 动画 效果 的 元 素 


【示例 】 在 下 面 示例 中 ,分 别 全 助 基本 选择 促 为 表格 中 不 同行 设置 不 同 的 显示 样式 ， 演 示 效 采 如 图 4.7 


所 示 。 
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<script> 

$(function(O) { 
$("tr:first").css("color", "red"): /设置 第 1 行 字 体 为 红色 
$("tr:eq(0)").css("font-size", "20px"): /设置 第 1 行 字 体 大 小 为 20 像素 
$("tr:last").css("color", "blue"): /设置 最 后 一 行 字 体 为 蓝 色 


$("tr:even").css("backeround", "#ffd"): /设置 偶数 行 背 景色 
$("tr:odd").css("backeround", "#dff'"): 1// 设置 奇数 行 背 景色 
$("tr:gt(3)").css("font-size", "12px"): 1// 设 置 从 第 5 行 开 始 所 有 行 的 字体 大 小 
$("tr:1t(4)").css("font-size", "14pX"): 1/ 设置 第 1 一 4 行 字 体 大 小 


月 
</script> 
<table=> 
<tr><th> 选择 器 </th><th> 说 明 </th> </tr> 
<tr><td>:first</td><td> 匹配 找到 的 第 一 个 元 素 。 例 如 ，$(&quot:tr:first&quot:) 表示 匹配 表格 的 第 一 行 </td></t> 
<h> <td>:last</td><td> 匹配 找到 的 最 后 一 个 元 素 。 例 如 ，$(&quottrlast&quot) 表示 匹配 表格 的 最 后 一 行 </td></0> 
<tr><td>:not</td><td> 去 除 所 有 与 给 定 选 择 器 匹配 的 元 率 。 注 意 , 在 jQuery 1.3 中 ,已 经 支持 复杂 选择 上 禹 了 ， 
如 :not(diva) 和 :not(div,a)。 例 如 ，$(&quot:input:not(:checked)&quot:) 可 以 匹配 所 有 未 选中 的 input 元 素 <td> </tr> 
<tr><td>:even</td><td> 匹配 所 有 索引 值 为 偶数 的 元 素 ， 从 0 开始 计数 。 例 如 ，$(&quot:tr:even&quot:) 可 以 匹 
配 表格 的 第 1、3、5 行 (索引 值 0,2, 4... )</td></tr> 
<tr><td>:0dd</td><td> 匹配 所 有 索引 值 为 奇数 的 元 率 ， 从 0 开始 计数 。 例 如 ，$(&quot:tr:odd&quot;) 可 以 匹配 
表格 的 第 2、4、6 行 (索引 值 1, 3, 5... )</td></tr> 
<tr><td>:eq</td><td> 匹配 一 个 给 定 索 引 值 的 元 素 ， 从 0 开始 计数 。 例 如 ，$(&quot:tr:eq(0)&quot:) 可 以 匹配 第 
1 行 表 格 行 </td></tr> 
<tr><td>:gt</td><td> 匹配 所 有 大 于 给 定 索 引 值 的 元 素 ， 从 0 开始 计数 。 例 如 ，$(&quot:tr:gt(0)&quot:) 可 以 匹 
配 第 2 行 及 其 后 面 行 </td></tr> 
<tr><td>:lt<td><td> 配 所 有 小 于 给 定 索 引 值 的 元 素 。 例 如 ，$(&quot:tr:gt(1)&quot;) 可 以 匹配 第 1 行 及 其 后 面 
行 < 中 </> 
<tr><td>:header</td><td> 匹配 hl 、h2、h3 之 类 的 标题 元 素 </td> </tr> 
<tr><td>:animated</td><td> 匹配 所 有 正在 执行 动画 效果 的 元 素 </td> </tr> 
</tabjle> 


这 


0 三 旨 Be CUsersyB\DocumentsWwwwrwtestl.html = 总 中 征 CUsersv8\Documentsww.。 X 全 六 过 


说 明 
匹配 找到 的 第 一 个 元 这 。 例 如 ， 打 "trfirst "表示 匹配 表格 的 第 一 行 
匹配 找到 的 最 所 一 个 元 豪 。 例如 ， 民 tclast 表示 匹 配 夫 格 的 最 后 一 行 
去 除 所 有 与 给 定 进 择 引 匹配 的 元 素 。 注 意 ， 在 六 nery 1.3 中 ， 已 经 友 持 复杂 选择 引 ， 如 :nottdivai-nottdiv 9 例 
如 ，$("input-not(:checke 遇 "可 区 本 所 有 未 选中 inputzt 素 


区 本 所 有 索引 值 为 已 数 的 元 素 ， 内 呈 入 计 郁 6。 网 胃 ， 针 "treven" 内 匹 配 表 樟 的 第 1 、3、 举 ! 索 引 值 为 0, 2, 4, .3 
臣 本 所 有 率 引 值 为 冶 数 的 元 素 ， 由 0 是 妨 计 孝 。 例如 ， 床 ' 臣 add 可 以 匹 醒 表 将 的 第 2、4、6 行 “索引 值 为 1: 3，5，...; 
匹 西 ! 一 个 给 定 索 引 值 的 元 素 ， 具 0 开始 计数 > 例 旭 ， 训 "reqt0)"9] 以 匹 丁 第 1 行 表 格 行 
匹 丁 所 有 大 寺 给 定 率 引 值 的 元 素 ， 从 0 开始 计 著 。 放 如， 科 下 张 四 可 以 匹配 第 半 及 其 后 面 行 
好 所 有 小 于 荣 定 宗 引 值 腹 元 索 。 例 如， 床 让 如 0 六 河 以 匹 芭 第 1 行 芭 其 后 面 行 

Jeader 区 本 、h2 、H3 之 芝 的 标题 元 索 

:animated 匹 西 所 有 正在 执行 动画 效果 的 亏 索 


图 4.7 位 置 选 择 紫 演示 改 果 


4.3.3 ”内容 选择 希 


内 容 选 择 器 主要 根据 匹配 元 素 所 包含 的 子 元 素 或 者 文本 内 容 进 行 过 滤 。 主 要 包括 4 种 内 容 选 择 器 ， 说 
明 如 表 4.4 所 示 。 
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1 A 
I 可 s 


| 表 4.4 ”内 容 选择 器 
| 选 择 器 说 有明 
:contains 匹配 包含 给 定 文 本 的 元 素 。 例 如 ，$0"div:contains( 图 片 )") 匹配 所 有 包含 “图 片 ” 的 div 元 素 
-empty 匹配 所 有 不 包含 子 元 素 或 者 文本 的 空 元 素 
:has 匹配 含有 选择 器 所 匹配 的 元 素 。 例 如 ，$("div:has(p)") 匹配 所 有 包含 p 元 素 的 div 元 素 
:parent 匹配 含有 子 元 素 或 者 文本 的 元 素 


【 示例】 借助 内 容 选择 天 选择 文档 中 的 特定 内 容 元 素 ， 然 后 对 其 进行 控制 ， 演 示 歼 果 如 图 4.8 所 示 。 


<script> 
$(function(){ 


$("li-empty").text(" 空 内 容 "); 


$("div ul:parent").css("backeround", "#111"): 
$("h2:contains(' 标题 )").css("color", "red"): 


$("p:has(span)").css("color", "blue™): 


// 匹配 空 元 素 

/ 匹配 div 中 包含 的 子 元 素 或 者 文本 
1/ 匹配 标题 元 素 中 包含 “标题 ”的 文本 
// 匹配 包含 span 元 素 的 p 元 素 


1) 
</script> 
| <div> 
| <h2> 标题 </h2> 
| <p> 段落 文本 1</p> 
<p><span> 段落 文本 2</span></p> 
< 
<]li></li> 
<]i></]i> 
| </ul> 
</div> 


= 3 | CUsersuaADiocurmeniswanwwntesihtrnl 
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| 图 4.8 内 容 选择 器 演示 效果 


可 视 选 择 器 

可 视 选择 器 是 根据 元 素 的 可 见 或 者 隐藏 来 进行 匹配 的 ， 详 细 说 明 如 表 4.5 所 示 。 
表 4.5 可 视 选择 器 

选 择 器 说 明 


hidden 匹配 所 有 不 可 见 元 素 ， 或 者 type 为 hidden 的 元 素 
匹配 所 有 的 可 见 元 素 


4.34 


Visible 
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【 示例】 分 别 设置 奇数 位 p 和 偶数 位 p 的 字体 颜色 ， 如 果 奇 数位 p 元 素 被 隐藏 ， 则 通过 p:hidden 选择 需 | 
匹配 它们 ， 并 把 它们 显示 出 来 。 | 


<script> 

$(functionO{ 
$("p:o0dd").hide(): // 隐藏 奇数 位 p 元 素 
$("p:odd").css("color", "red"): /设置 奇数 位 p 元 素 的 字体 颜色 为 红色 
$("p:visible").css("color", "blue"): /设置 偶数 位 了 元 素 的 字体 颜色 为 蓝 色 
$("p:hidden").showO: / 显示 奇数 位 p 元 素 

月 

</script> 

<p> 独 在 异乡 为 异 客 ，<p> 

<p> 每 着 佳节 信和 思 亲 。</p> 


<p> 遥 知 兄弟 登高 处 ，</p> 
<p> 遍 插 荣 黄 少 一 人 。 </p> 


4.3.5 源码 解析 


Sizzle 引擎 的 核心 部 分 是 对 CSS 伪 类 选择 器 的 处 理 。 在 第 3 章 中 分 析 了 tokenize 方法 ， 它 把 选择 器 字 
符 申 分 解 成 分 词 。 当 然 ，Sizzle 没有 直接 将 拿 到 的 “分 词 ”结果 与 Expr 中 的 方法 逐个 匹配 并 执行 ， 而 是 先 
根据 规则 组 合 出 一 个 大 的 匹配 方法 ， 最 后 一 步 执行 。 | 
编译 函数 Sizzle.compile 中 最 核心 的 一 段 代 码 如 下 : 
1= group.leneth: 
while (1-- ){ 
cached = matcherFromTokens( eroup|1| ): 
1f (cached| expando | ) { 
setMatchers.push( cached ): 
} else { 
elementMatchers.push( cached ): 
} 


} 
cached = compilerCache( selector matcherFromGroupMatchers( elementMatchers, setMatchers ) ): 


matcherFromTokens( 方法 通过 tokens 生成 匹配 程序 ， 它 充当 了 selector“ 分 词 ”与 Expr 中 定义 的 匹配 | 
方法 的 纽带 ， 可 以 说 选择 符 的 各 种 排列 组 合 都 能 适应 。 
matcherFromGroupMatchers0 方法 通过 返回 curry 的 superMatcher0 方法 执行 。 
伪 类 如 何 生成 最 终 的 匹配 着 ? 先 看 matcherFromTokens 源码 核 心 部 分 : 
for(;i<len;1it)t 
1 ( (matcher = Expr.relative[ tokens|i|.type |) ) { 
matchers = | addCombimator(elementMatcher( matchers ). matcher) |: 
+ else { 
matcher = Expr.filter[ tokens[1|.type |].apply( null, tokens[i|.matches ): 


从 上 面 代码 可 见 ， 根 据 分 词 器 类 型 type 的 不 同 ， 会 适 配 两 组 不 同 的 处 理 方案 。 | 
第 一 种 是 位 置 词素 ， 之 前 就 讲 过 ; 第 二 种 是 用 Exprfilter 工厂 方法 来 生成 匹配 器 ， 每 条 选择 器 规则 最 小 | 
的 几 个 单元 可 以 划分 为 ATTR、CHILD、CLASS、ID、PSEUDO、TAG， 代码 框架 如 下 : | 
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// 过 滤 晴 数 
filter: 1 
// 标签 过 滤 清 数 
"TAG": function (nodeNameSelector) { 


上 
/类 过 滤 函 数 
"CLASS" function (className) { 


上 
/ 属性 预 过 滤 
"ATTR": function (name, operator, check) 1 


/ 子 元 素 选择 希 过 滤 
"CHILD": function (type, what, areument, first, last) { 


和 
/ 伪 类 过 滤 
"PSEUDO": function (pseudo, areument) { 


} 
} 


位 置 伪 元 素 的 源 代码 如 下 : 


/在 结果 集 的 位 置 
// 使 用 createPositionalPseudo 创建 位 置 过 滤 消 数 ， 血 返回 匹配 的 index 就 可 以 了 
"first": createPositionalPseudo(function (O { 
return |0|: 
oh. 
"last": createPositionalPseudo(function (matchIndexes, leneth) { 
return [leneth - ] |: 
}), 
"eq": createPositionalPseudo(function (matchIndexes, leneth, areument) { 
return [areument < 0 ? areument + length : areument|: 
}), 
"even": createPositionalPseudo(function (matchIndexes, leneth) { 
varl= OO: 
for (:1< length:1+= 2){ 
matchIndexes.push(1): 
} 
return matchIndexes: 
}), 
"odd": createPositionalPseudo(function (matchIndexes. length) { 
var1= 1: 
for (: i< length: i+= 2) { 
matchIndexes.push(1): 
} 


return matchIndexes: 
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少 ， 
"lt": createPositionalPseudo(function (matchIndexes, length, areument) { 
var 1= areument < 0 ? areument + length : areument: 
for (: --1=>= 0:) { 
matchIndexes.push(1): 
} 


return matchIndexes: 


gt": createPositionalPseudo(function (matchIndexes. length, areument) { 
var 1= areument < 0 ? areument + length : areument: 
for (; ++1 < length;) { 
matchIndexes.push(1): 
} 


return matchIndexes: 


}) 


每 个 子规 则 都 有 对 应 的 匹配 各 ， 同 样 道理 ,位 置 伪 类 也 有 特殊 的 匹配 种 ， 它 由 setMatcher 工厂 生成 。 ， 
为 了 区 分 其 他 规则 与 位 置 伪 类 ， 需 要 对 位 置 伪 类 的 选择 器 、 匹 配器 等 打 个 标记 。Sizzle 源码 中 用 到 的 打 标 记 | 
方法 如 下 : | 


function markFunction( tn ) 1{ 
tn| expando | = true: 
return fn: 

} 


位 置 伪 元 素 的 共同 特点 是 被 createPositionalPseudo Curry 一 次 ， 代 码 如 下 : 


/返回 一 个 图 数 ， 用 于 位 置 伪 类 
/ 传人 参数 血 ， 返 回 一 个 函数 ， 调 用 这 个 函数 ( argument ) 又 返回 一 个 函数 ( seed，matches )， 
/这 个 图 数 为 血 传 人 参数 [],seed.lenegth,areument 
//fhn 返回 matchIndexes，seed 中 匹配 matchIndexes 的 项 取 反 ，matches 得 到 匹配 项 
tunction createPositionalPseudo(fn) + 
/返回 标记 的 函数 
retum markFunction(function (areument) { 
areument = +areument; 
return markFunction(function (seed, matches) { 
Var ]， 
matchIndexes = fn(|[], seed.length, areument), 
1= matchIndexes.lenegth:; 
/ 在 指定 索引 处 找到 匹配 元 素 
while (1--) { 
1f (seed[(] = matchIndexes[10)|) { 
1/ 如 果 seed[j] 存在 ，seed[j] 取 非 
seed|]| = !(matches[]| = seed[]|): 
} 
}): 
}); | 
} | 


Curry 化 是 一 种 通过 把 多 个 参数 填充 到 函数 体 中 ， 实 现 将 函数 转换 成 一 个 新 的 经 过 简化 的 〔 使 之 接收 的 


* 105 。 


1 2 信和 门 到 精通 ( 梓 梨 精 编 县 ) 


。 参数 更 少 ) 函数 技术 ， 也 会 形成 闭 包 ,保存 私有 值 。 所 以 这 里 很 好 理解 ， 最 终 返回 的 函数 如 下 : 
| tunction(areument) { 
| areument = +aregument; 
return markFunction(function(seed, matches) { 
var ], 
matchIndexes = fn(|], seed.length, areument), 
1= matchIndexes.leneth: 
while (1--) { 
lf (seed[(] = matchIndexes|[1|)|) { 
seed|]| = !(matches[]| = seed|[]|): 


} 
3 
}); 

| }); 
| 所 以 ， 针 对 位 置 型 的 伪 筛 选 ， 如 :first、:last、:eq、:even、:odd、:lt、:gt， 都 是 做 了 单独 的 处 理 。 对 于 
其 他 选择 器 ， 如 :not、:has 、:contains 等 ， 其 实 基础 的 流程 处 理 都 差不多 ， 只 是 针对 不 同 的 情况 分 别 进 行 差 

在 初始 化 的 时 候 ， 返 回 新 的 Curry 国 数 ， 打 上 标记 markFunction。 

下 面 再 来 看 一 下 ExprfilterPSEUDO， 源 代码 如 下 : 


// 伪 类 过 滤 
"PSEUDO": function (pseudo, areument) + 
// 伪 类 名 称 不 区 分 大 小 写 
// 用 自 定义 pseudos 来 区 分 大 小 写 
/ 优先 考虑 大 小 写 ， 避 免 目 定义 伪 类 添加 了 大 写字 母 
// 记 住 ，setFilters 继承 自 pseudos 
Var args, 
/ 优先 考虑 pseudos， 其 次 考虑 [pseudo.toLowerCase() 
fn = Expr.pseudos|pseudo| || Expr.setFilters[pseudo.toLowerCase( )| || 
Slzzle.error("unsupported pseudo: " + pseudo):; 
// 用 户 可 能 使 用 createPseudo 指明 需要 参数 来 创建 过 滤 函 数 ， 就 像 Sizzle 一 样 
于 (ftnlexpandoj) + 
// 原来 这 个 标记 这 样 用 
return fn(areument); 


} 
/ 维护 旧 的 签名 
if (fn.leneth> 1){ 
args = [pseudo, pseudo, "", areument|: 
//setFilters 有 日 己 的 属性 pseudo 
return Expr.setFlilters.hasOwnProperty(pseudo.toLowerCase()) ? 
// 候选 集 seed， 匹 配 的 结果 matches 
markFunction(function (seed, matches) { 
Var 1dx., 
matched = fhn(seed, areument), 
1= matched.leneth: 
while (1--) { 
1dx = IndexOt(seed, matched|1|): 
//seed 被 匹配 的 项 置 false 
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seed|[idx| = !(matches[idx| = matched|1i|): 
} 
}): | 
function (elem) { | 
return fn(elem, 0, args): | 


} | 

// 返回 过 滤 师 数 | 

return fn: 
+ 


显而易见 ， 血 执行 的 正 是 上 面 代 但: 


"even": createPositionalPseudo(function( matchIndexes. leneth ) { 
Var 1 三 (0: 
for(:i<length:i+=2)1{ 
matchIndexes.push( 1 ): 
和 
return IatchIndexes: 


少 ， 


执行 继续 髓 套 形成 的 Curry 函数 ， 返 回 一 个 Curry 方法 ， 并 打上 一 个 标记 。 


tunction( seed, matches ) { 
var ], 
matchIndexes = fn( ||. seed.length., areument ). 
1= matchIndexes.leneth: 
while (1-- ){ 
(seed| (] = matchIndexes[1|) | ){ 
seed[]| = !(matches[]| = seed[] |]); 
} 
lb 
} 
所 以 最 终 的 匹配 天 方法 能 套 了 4、5 层 作 用 域 。 为 什么 要 写 这 人 么 复杂 ? 因为 可 以 合并 不 同 的 参数 传递 。 
其 实 Sizzle 核 心 处 理 机 制 是 不 变 的 ， 只 是 针对 不 同 的 分 文 做 了 不 同 的 处 理 ， 因 此 整合 在 一 起 就 显得 很 复 傈 。 


4.4 属性 选择 器 | 

| 

属性 选择 表 主 要 根据 元 素 的 属性 及 其 属性 值 作 为 过 滤 的 条 件 ， 来 匹配 对 应 的 DOM 元 素 。 属 性 选择 天 | 

都 是 以 中 括号 作为 起 止 分 界 生 。jQuery 定义 了 7 类 属性 选择 硕 ， 说 明 如 表 4.6 所 未。 | 


表 4.6 属性 选择 器 
选 择 器 说 有 明 
匹配 包含 给 定 属性 的 元 素 
[attribute] 注意 , 在 jQuery 1.3 中 ， 前 导 的 @ 符 号 已 经 被 上 废除， 如 果 想 要 兼容 最 新 版 本 ， 只 需 
要 简单 去 掉 @ 符号 即 可 。 例 如 ，$("div[id]") 表示 查找 所 有 含有 id 属性 的 div 元 素 
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续 表 
选 择 器 说 ”有明 
匹配 属性 等 于 特定 值 的 元 素 。 属 性 值 的 引号 在 大 多 数 情况 下 是 可 选 的 ， 如 果 属 性 值 
[attribute=value] 中 包含 “]” 时 ， 需 要 加 引号 用 以 避免 冲突 


例如 ，S$("input[name='text]") 表示 查找 所 有 name 属性 值 是 'text 的 input 元 素 


匹配 所 有 不 含有 指定 的 属性 ， 或 者 属性 不 等 于 特定 值 的 元 素 。 该 选择 器 等 价 于 
Dot(|attr=value|) 


ttribute!=val | 
ee 要 匹配 含有 特定 属性 但 不 等 于 特定 值 的 元 素 ， 可 以 使 用 [attr]:not([att=value]) 
例如 ，$C'input[name!='textl" 表示 查找 所 有 name 属性 值 不 是 'text 的 input 元 素 

| 匹配 给 定 的 属性 是 以 某 些 值 开 始 的 元 素 
Sa 例如 ，$C'input[name^='text]" 表示 所 有 name 属性 值 是 以 text 开始 的 input 元 素 
i 匹配 给 定 的 属性 是 以 某 些 值 结尾 的 元 素 

和 例如 ，$("input[name$='text]" 表示 所 有 name 属性 值 是 以 'text 结束 的 input 元 素 
| 匹配 给 定 的 属性 是 包含 某 些 值 的 元 素 


例如 ，$("input[name*='text]") 表示 所 有 name 属性 值 是 包含 "text' 字符 串 的 input 元素 


复合 属性 选择 占 ， 需 要 同时 满足 多 个 条 件 时 使 用 
[selectorl][selector2][selectorN] | 例如 ，$("input[name*='text]] [id]") 表示 所 有 name 属性 值 包含 'text 字符 串 ， 且 包含 
id 属性 的 input 元 素 


| 【示例 】 使 用 jQuery 属性 选择 占 根 据 超 链接 文件 的 类 型 ， 分 别 为 不 同类 型 的 文件 添加 类 型 文件 图 标 。 页 
，” 面 初始 化 前 的 效果 如 图 4.9 所 示 。 执 行 脚本 之 后 的 显示 效果 如 图 4.10 所 示 。 


<scrIipt> 
$(function(){ 
Var al = $("a[href$=".pdf |"): 
al.html(function() + 
returmn "一 img src~'images/pdf.egif /> "十 $lthis).attr( "href ): 
}); 
Var a2 = $("afhref$=".rar]'"): 
a2.html(function()1{ 
retum "<ime src~'images/rar.eif /> "+ $(this).attr("href"): 
}); 
Var a3 = $("a[lhref$=".jpe'|,alhref$=".bmp'|,alhref$=".gf |,alhret$=".png'|"): 
a3.html(function()1{ 
retum "<imeg src='’images/jpg.2if /> "+$(this).attr("href’"): 
}); 
var a4 = $("afhref“='http:"]"): 
a4.html(function() + 
retum "<imeg src='’images/html.gif /> "+$(this).attr("href’"): 
DE 
}) 
</script> 
<a hre 伍 "1.pdf"'> 参考 手册 .pdf</a><br /> 
<a hre 全 "2.pdf'> 权威 指南 .pdf</a><br /> 
<a hre 伍 "3.rar"> 压 绩 包 .rar</a><br 广 
<a hre 人 "4.jpg"> 图 片 文件 1</a><br 亡 
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<a hre 伍 "$.bmp"> 图 片 文件 2</a><br /> 

<a hre 伍 "6.gif"> 图 片 文件 3</a><br > 

<a hre 全 "7.png"> 图 片 文件 4</a><br 廊 

<a href="http://www.baidu.com/"> 百度 </a><br 广 
<a hre 伍 "http://www.sohu.com/"> 搜狐 </a><br 廊 


机 


| 3) cAWUsers\g\Documantsv ~ | 二 c 


, | 3] cAUsers\a\Documents = 世上 | 


图 4.9 ”处 理 前 超 链接 效果 图 4.10 处理 后 超 链接 效果 | 
【源码 分 析 】 | 
首先 ,设计 属性 选择 器 正则 表达 式 : | 


/ 属性 选择 天 

attributes = "\[" + whitespace + "*(" + identifier + ")(?:" 十 Whitespace 十 
// 操作 符 ( 捕获 2 ) 
"*#([* 人 ^$|!~]?=)" + whitespace 十 
// 属 性 值 必 须 是 CSS 标识 符 [capture 5] 或 字符 串 [capture 3 或 capture 4] | 
下 OOM DYN EM EC + identifier 十 "7) "二 whitespace + 
sd 


上 面 这 个 正则 表达 式 比较 复杂 ， 先 转换 为 非 字 符 串 的 正则 表达 式 ， 方 便 分 析 。 


attributes = "\|" + whitespace + "*(" + identifier + ")(?:" + whitespace + "*([*^$|!~|?=)" + whitespace 十 "二 (2 和) 才 7 | 
VOW SC + identifier + "DD)" + whitespace + "*W|" 


四 \[" + whitespace + "* 

“\[” 加 上 whitespace， 就 是 “[” 后 面 接任 意 个 空 晶 符 。 | 
四 ("+1identifier + ") | 
“(” 加 上 identifer， 匹 配 符合 标识 符 规范 的 字符 串 ， 在 这 里 表示 属性 名 ， 匹 配 内容 放 到 捕获 
四 (2 十 Whitespace + "* 

“(?:” 加 上 whitespace， 这 里 接任 意 个 空 日 符 。 

加 ([*^$|!~]?=) | 
匹配 一 个 操作 符 ， 操 作 符 包 括 *= 、 和、 4$= 、|=、!=、~= 、=。 匹 配 内 容 放 到 捕获 
加 "十 Whitespace + "* 

可 以 匹配 任意 个 空白 符 。 | 
Q(TPIYM ECWU 人 WI + 1dentifier + ")) 

这 里 匹配 单 引 号 、 双 引号 或 符合 identifier 的 值 ， 捕 获 内 容 分 别 放 到 捕获 组 3、4、5。 
四 


属性 名 以 后 ， 后 面 都 是 空 值 ， 也 就 是 只 有 属性 名 的 属性 选择 器 。 | 
四 十 Whitespace + "*\W]" | 
任意 个 空白 符 ， 再 接 上 “]” 结 尾 。 、 
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总 之 ，attributes 将 匹配 CSS 选择 融 的 属性 选择 肯 ， 如 [title='haha'] 或 [multiple] 等 。 
属性 选择 船主 要 通过 过 滤 困 数 实现 匹配 ， 代 人 码 如 下 : 
/ 属性 预 过 滤 
/name 是 属性 名 ，operator 是 操作 符 ，check 是 检查 值 
/ 例如 选择 器 [type="checkbox"] 中 ，name="type"，operator"="，check="checkbox 
/返回 布尔 值 
"ATTR": function (name, operator, check) + 
/返回 一 个 元 匹配 从 
// 返回 限 数 ,函数 需要 参数 elem 
retum function (elem) { 
// 获取 elem 的 name 属性 
Var result = Silzzle.attr(elem, name); 
// 看 看 是 否 有 属性 值 
if (result == null) { 
// 如 果 操 作 符 是 不 等 号 ， 返 回 真 ， 因 为 当前 属性 为 空 ， 是 不 等 于 任何 值 的 
return operator ——= "I="; 


} 

if (loperator) { / 如 果 没 有 操作 符 ， 那 就 直接 通过 规则 
1/ 如 果 没 有 操作 符 ，result 不 为 空 ， 那 么 属性 存在 ， 返回 true 
return true: 

} 


// 有 操作 符 ，result 不 为 空 
// 加 上 空格 ，check 后 面 会 加 上 空格 ,方便 比较 
result += ""”: 
return operator 一 一 "=" ? result = 一 check : /如果 是 等 号 ， 判 断 目标 值 跟 当 前 属性 值 相 等 是 否 为 真 
operator 一 一 "!=" ? result ! 一 check :// 如 果 是 不 等 号 ， 判 断 目标 值 跟 当 前 属性 值 不 相等 是 否 为 真 
operator 二 一 "="? check && resultindexOfchecl 一 0 :// 如 果 是 起 始 相 等 ， 判 断 目标 值 是 否 在 
/ 当前 属性 值 的 头 部 
operator =— "*=" ? check && result.indexOf(check) > -1 :/ 这 样 解释 : lang*=en 匹配 <html lane 
jxXXXenXXX"> 这 样 的 节点 
/slice ( -xxx.length ) 检测 结尾 
operator 一 二 "$=" ? check && result.slice(-check.length) — check :/ 如 果 是 末尾 相等 ， 判 


1/ 断 目标 值 是 否 在 当前 
/ 属性 值 的 末尾 


//check 后 面 有 空格 ， 所 以 匹配 会 正确 工作 
这 样 解释 : lane~=en 匹配 <html lane="zh CN en"> 这 样 的 节点 
operator 一 二 "|=" ? result —= check || result.slice(0. check.length + 1) —= check 十 


"-":// 这样 解 释 : lane=|en 匹配 <html lang="en-US"> 这 样 的 节点 
false: 


4.5 表单 选择 器 


jQuery 专门 定义 了 表单 选择 融 ， 使 用 表单 选择 胡可 以 方便 地 获取 表单 中 某 类 表单 域 对 象 。 
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4.5.1 类 型 选择 希 
jQuery 定义 了 一 组 伪 类 选择 器 ， 利 用 它们 可 以 获取 页 面 中 的 表单 类 型 元 素 ， 说 明 如 表 4.7 所 示 。 
表 4.7 表单 类 型 选择 兹 


选 择 再 说 明 

:input 匹配 所 有 input、textarea、select 和 button 元 素 

:text 匹配 所 有 单行 文本 杠 | 
:password 匹配 有 所 有 和 密 侣 框 | 
:Tadio 匹配 所 有 单 选 按钮 | 
:checkbox 匹配 有 所 有 复 选 框 | 
:submit 匹配 所 有 提交 按钮 | 
:image 匹配 所 有 图 像 域 | 
reset 匹配 所 有 重 置 按 名 | 
:button 匹配 所 有 按钮 | 
:file 匹配 所 有 文件 域 | 
:hidden 匹配 所 有 不 可 见 元 素 ， 或 者 type 为 hidden 的 元 素 | 


<form 1d="test" action="" method="get"> 
<input name 一 "" type="text" value=" 文本 域 "><br 广 
<input name='"" type="password" value=" 密码 域 "><br 广 
<input name="" type="checkbox" value=" 复 选 框 "> 复 选 框 <br /> 
<input name='"" type='"Tradio" value=" 单 选 按钮 "> 单 选 按钮 <br /> | 
<input name='"" type="image" value=" 图 像 域 " src="images/btn.pne"S><br /> | 
<input name="" type="file" value=" 文件 域 "><br /> | 
<input name='"" type='"hidden" value=" 隐藏 域 "><br 广 
<input name='"" type="button" value=" 普通 按钮 "><br 廊 
<input name=="" type="submit" value=" 提交 按钮 "><br /> | 
<input name 一 "" type='Teset" value=" 量 置 按钮 "><br /> | 


| 
【示例 】 下 面 是 一 个 表单 页 面 ， 本 例 演示 如 何 使 用 表单 选择 天 控制 实现 交互 操作 。 表 单 的 HIML 纪 构 


</form> | 
执行 该 HIML 结构 代码 ， 生 成 的 页 面 效 果 如 图 4.11 所 示 。 | 
然后 ， 使 用 表单 选择 天 快速 选择 这 些 表单 域 ， 并 修改 它们 的 value 属性 值 ， 如 图 4.12 所 示 。 | 
<script> | 
$(function() { 


$("#test :text").val(" 修改 后 的 文本 域 "): | 
$("#test :password").val(" 修改 后 的 密码 域 "): 
$("#test :checkbox").val(" 修改 后 的 复 选 框 "): | 
$("#test :radio").val(" 修改 后 的 单 选 按 钮 "); | 
$("#test :image").val(" 修改 后 的 图 像 域 "): 、 
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$("#test :file").val(" 修改 后 的 文件 域 "): 

| $("#test :hidden").val(" 修改 后 的 隐藏 域 由 : 

| $("#test :button").val(" 修改 后 的 普通 按钮 "): 
| $("#test :submit").val(" 修改 后 的 提交 按钮 "): 
| $("#test :reset").val(" 修改 后 的 重 置 按钮 "); 


ey script> 


| ‘ed (+) | 各 http:yflocalho... ~ 昌 必 中 是 localhost 二 +) | htp://localho... ~ @ S| gE localhost 
| 
| 


邓 本 域 


| 吕 复 选 村 复议 村 
口 单 选 榨 饥 已 单 二 控 馈 


| 

OO Downiload (# ownload 
| 

| i 


修改 后 的 基 通 按 甸 
| 
| 芋 置 按钮 修 上 后 的 重 置 按 彻 


图 4.11 设计 初 的 表单 效果 图 4.12 修改 后 的 表单 效果 


4.5.2 ”状态 选择 尼 


jQuery 根据 表单 域 状态 定义 了 4 个 专用 选择 条， 说 明 如 表 4.8 所 示 。 


| 表 4.8 ”状态 选择 器 
| 选 择 器 说 有明 


| :enabled 匹配 所 有 可 用 元 素 

| :disabled 匹配 所 有 不 可 用 元 素 

-checked 匹配 所 有 被 选中 的 元 素 ( 复 选 框 、 单 选 按钮 等 ， 不 包括 select 中 的 option ) 
| :selected 匹配 所 有 选中 的 option 元 素 


| 【示例 】 使 用 表单 的 属性 选择 器 实现 交互 操作 。 表 单 的 HIML 结构 代码 如 下 : 


<form 1d="test" action="" method="get"> 
<input name="" type="text" disabled="disabled" value=" 文本 域 "><br > 

| <input name="" type="text" disabled="disabled" value=" 文本 域 "><br > 
| <input name="" type="text" value=" 文本 域 "><br /> 
| <input name="" type="checkbox" checked='"checked" value=" 复 选 框 "> 复 选 框 <br 记 
<input name="" type='"radio" value=" 单 选 按钮 "> 单 选 按钮 <br 广 
<select name—""> 

| <option value="1">1</option= 

| <option value="1">2</option= 

| <option value="1" selected="selected">3</optlon=> 

</select> 

| </ftorm> 
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执行 该 HIML 结构 代码 ， 生 成 的 页 面 旭 图 4.13 所 示 。 
使 用 表单 状态 选择 需 快 速 选择 这 些 表 单 域 ， 并 对 表单 域 实施 控制 ， 效 果 如 图 4.14 所 示 。 


<script> 

$(function() { 
$("#test :disabled").val(" 不 可 用 "): 
$("#test :enabled").val(" 可 用 "); 
$("#test :checked").removeAttr("checked"): 
$("#test :selected").removeAttr("selected"); 


人 


</script> 


a 


= 全 [中 :| 总 http:yjflocalho... = 昌 已 中远 2 = [ 叶 :| 蝇 http:iWlocalho... = 区 刷 


文本 坏 
文本 同 
文本 车 
国 复 选 杠 


ni 


图 4.13 设计 初 的 表单 效果 图 4.14 修改 后 的 表单 效果 


4.6 jQuery 选择 器 优化 


经 过 代码 优化 和 缓存 处 理 ，Sizzle 选择 器 引擎 上 
从 处 理 流 程 上 分 析 ，Sizzle 选择 器 引擎 总 是 优先 使 月 


> 本 


了 5 个 API。 


加 ”getElementBylId: 上 下 文 只 能 是 HTML 文档 ,浏览 带 支 持 情况 : IE 6+、Firefox 3+、Safari 3+、 
Chrome 4+、Opera 10+。 
加 ”getElementsByName: 上 和 下文 只 能 是 HIML 文档 ， 浏 览 需 文 持 情况 : IE 6+、Firefox 3+、Safari 3+、 
Chrome 4+、Opera 10+。 
加 ”getFElementsByClassName: 浏览 右 支 持 情 况 : IE 9+、Firefox 3+、Safari 4+、Chrome 4+、Opera 10+。 
加 ”getElementsByTagName: 上 下 文 可 以 是 HTML 文档 ，XML 文档 及 元 素 闻 点 。 
加 高 级 API 
> querySelector: 收 一 个 CSS 选择 带 字 符 串 参数 ， 将 返回 匹配 的 第 一 个 元 素 ， 如 末 设 有 匹配 的 元 
素 则 返回 Null。 
> querySelectorAll: 收 一 个 CSS 选择 骨 字 符 捉 参数 ，|} 
有 匹配 的 元 素 则 返回 的 数组 为 空 。 
浏览 器 支持 情况 : IE 8+、Firefox 3.5+、Safari 3+、Chrome 4+、Opera 10+。 
浏览 带 内 置 的 CSS 选择 符 查 询 元 际 的 方法 ， 比 getElementsByTaeName 和 getElementsByClassName 效 


f 返 回 一 个 包含 匹配 的 元 素 的 数组 ， 如 果 没 


| 
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率 要 高 很 多 。 

相对 而 言 ， 上 面 原生 方法 中 ，document.getElementByIld 的 查询 速度 最 快 。 

Sizzle 在 设计 和 使 用 选择 器 时 ， 遵 循 下 面 设计 原理 。 

第 1 步 ,， 浏 览 埋 原生 文 持 的 方法 ， 效 率 肯 定 比 Sizzle 使 用 JavaScript 写 的 方法 要 高 ， 优 先 使 用 也 能 保证 
Sizzle 更 高 的 工作 效率 ， 在 不 文 持 querySelectorAll 方法 的 情况 下 ，Sizzle 也 是 优先 判断 是 不 是 可 以 直接 使 用 
getElementById 、getElementsByTag 、getElementsByClassName 等 方法 解决 问题 。 

第 2 步 ， 在 相对 复杂 的 环境 下 ，Sizzle 总 是 尽 可 能 利用 原生 方法 来 查询 选择 ， 以 缩小 竺 选 范 玮 ， 然 后 才 
会 利用 前 面 介 绍 的 “编译 原理 ”来 对 待 选 范围 的 元 素 逐 个 匹配 筛选 。 进 入 “编译 ”这 个 环节 的 工作 流程 有 
些 复杂 ,效率 相 比 前 面 的 方法 肯定 会 稍 低 一 些 ,， 但 Sizzle 在 尽量 少 用 这 些 方法 ， 同 时 也 让 这 些 方法 处 理 的 
结果 集 尽 量 小 和 简单 ， 以 便 获 得 更 高 的 效率 。 

第 3 步 ， 即 便 进 入 “编译 ”的 流程 ，Sizzle 还 设计 了 缓存 机 制 。Sizzle.compile 是 “编译 ”入 口 ， 它 会 
调用 第 三 个 核心 方法 superMatcher ，compile 方法 将 根据 selector 生成 的 匹配 因数 缓存 起 来 。 另 外 ，tokenize 
方法 也 将 根据 selector 做 的 分 词 结 果 缓 存 起 来 。 也 就 是 说 ， 当 执行 过 一 次 Sizzle (selecto?) 方法 以 后 ， 下 次 再 
直接 调用 Sizzle (selector) 方法 ， 它 内 部 最 耗 性 能 的 “编译 ”过 程 不 会 再 耗 太 多 性 能 ， 直 接 取 之 前 缓存 的 方 
法 就 可 以 了 。 

所 谓 “ 编 译 "， 可 以 理解 成 是 生成 预 处 理 的 函数 并 存储 起 来 备用 。 

人 起 到 至 关 重 要 的 作用 。 使 用 合适 的 选择 器 表达 式 可 以 提高 性 能 、 增 
强 语 义 并 简化 逻辑 。 在 传统 用 法 中 ， 最 常用 的 简单 选择 带 包 括 ID 选择 器 、 Class 选择 占 、 类 型 标签 选择 骨 ， 
其 中 ID 选择 些 是 速度 最 快 的 。 这 主要 是 因为 JavaScript 内 置 图 数 getElementById0。 其 次 是 标签 选择 此 ， 因 
为 使 用 JavaScript 内 置 图 数 getElementsByTagO0。 速 度 最 慢 的 是 Class 选择 上 部 ， 其 需要 通过 解析 HTML 文档 
树 ， 并且 需要 在 浏览 器 内 核 外 递归 ， 这 种 递归 遍历 是 无 法 被 优化 的 。 

从 需求 方面 分 析 ，CSS 的 选择 器 是 为 了 通过 语义 来 泻 染 样式 ， 而 jQuery 的 选择 器 只 是 为 了 选 出 一 类 
DOMElement， 执 行 逻辑 操作 。 但 是 ， 在 实际 开发 中 ，Class 选择 天 是 使 用 频率 最 高 的 类 型 之 一 ， 如 表 4.9 
所 示 。 


表 4.9 jQuery 选择 兹 使 用 频率 列表 


.Class #1d tag.class 0.932 
.Class .class #1d tag tag 0.338 


Class 选择 需 在 文档 中 使 用 频率 靠 前 ， 这 无 疑 会 增加 系统 的 负担 ， 因 为 每 次 使 用 Class 选择 希 ， 整 个 文 
档 就 会 被 解析 一 忆 ， 并 遍历 每 个 节点 。 因 此 ， 建 议 读者 在 使 用 jQuery 选择 涯 时， 应 该 注意 以 下 几 个 问题 。 
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第 一 ， 多 用 了 D 选择 器 。 

多 用 了 攻 选择 吕 ,这 是 一 个 明智 的 选择 ， 即 使 不 存 攻 选择 器 ， 也 可 以 从 父 级 元 素 中 添加 一 个 有 D 选择 器 ， 
这 样 就 会 缩短 节点 访问 的 路 径 。 

第 二 ， 少 直接 使 用 Class 选择 骨 。 

可 以 使 用 复合 选择 器 ， 例 如 ， 使 用 tag.class 代替 .class。 文 档 的 标签 是 有 限 的 ， 但 是 类 可 以 拓展 标签 的 
语义 ， 那 么 大 部 分 情况 下 使 用 同一 个 类 的 标签 也 是 相同 的 。 

当然 ， 应 该 据 除 表达 式 中 的 元 余部 分 ， 对 于 不 必要 的 复合 表达 式 就 应 该 进行 简化 。 例 如 ， 执 d2 坟 d1l 或 
者 tag#idl 表达 式 ， 不 妨 直 接 使 用 页 41， 因 为 ID 选择 天 是 唯一 的 ， 执 行 速 度 最 快 ， 使 用 复合 选择 融会 增加 
负担 。 

第 三 ， 多 用 父子 关系 ， 少 用 舱 套 关系 。 

例如 ， 使 用 parent>child 代替 parent child。 因 为 “>” 是 child 选择 需 ， 只 从 子 节 点 里 匹配 ， 不 递归 。 
而 ”” 是 后 代 选 择 各 ， 递 归 匹 配 所 有 子 节 点 及 子 节 点 的 子 节 点 ， 即 后 代 节 点 。 

第 四 ， 缓 仔 jQuery 对 象 。 

如 果 选 出 结果 不 发 生变 化 ， 不 妨 缓 存 jQuery 对 象 ， 这 样 可 以 提高 系统 性 能 。 养 成 缓存 jQuery 对 象 的 习 
惯 可 以 在 不 经 意 间 就 能 够 完成 主要 的 性 能 优化 。 

【示例 】 下 面 的 用 法 是 低 效 的 。 

for (I=0:;1<100:;1++t )...f{ 

Var myList = $( " .myList ' ):; 
myList.append(1): 
} 


而 使 用 下 面 方法 先 缓存 jQuery 对 象 ， 执 行 效率 就 会 大 大 提高 。 
Var myLi1st = $( " .myList ' ); 
for(i=0;i<100;iTt)...t{ 
myList.append(1):; 
} 


. 115 。 


jQuery 过 滤器 是 一 系列 简单 、 实 用 的 jQuery 对 象 方法 ， 建 立 在 选择 器 基础 上 对 
jQuery 对 象 进行 二 次 过 滤 。 在 jQuery 框架 中 ， 过 滤器 主要 包含 过 滤 、 查 找 和 串联 三 类 
操作 行为 。 


【学 习 重 点 】 

Pb 使 用 过 滤 方 法 。 
| 使 用 查找 方法 。 
| 使 用 串联 方法 。 
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5.] 篆 先 对象 
中 选 是 对 jQuery 匹配 的 DOM 元 素 进 行 再 选择 ， 主 要 包括 8 种 方法 ， 话 细 说 明 如 下 。 


5.1.1 包含 类 


jQuery 使 用 hasClass0 方法 检查 当前 元 素 是 否 包 含 特定 的 类 。 用 法 如 下 : 


hasClass(className) 


参数 className 是 一 个 字符 串 ， 表 示 类 和 名。 该 方法 适合 条 件 检 测 ， 判 断 jQuery 对 象 中 的 每 个 元 素 是 否 
包含 了 指定 类 名 ， 如 果 包 含 则 返回 tue， 否 则 返回 false。 


党 提示 : 使 用 is("."+ className) 可 以 执行 相同 的 判断 操作 。 


【示例 】 在 click 事件 处 理 函 数 中 使 用 hasClass0 方法 ， 对 jQuery 对 象 包含 的 每 个 元 素 进 行 类 型 过 滤 ， 
设置 当 <div> 标签 包含 class 属性 值 为 Ted 的 元 素 时 ， 为 其 绑 定 一 组 动画 ， 实 现 当 鼠标 单 击 类 名 为 red 的 
<div> 标签 时 让 它 左 右 摆 动 两 下 ， 演 示 歼 果 如 图 5.1 所 示 。 


<script> 
$(function(){ 
$("div").click(function(O# // 为 所 有 div 元 素 绑 和 定单 击 事件 
if ( $(this).hasClass("red") ) // 只 有 类 名 为 red 的 div 元 素 才 绑 定 系列 动画 
$(this) 
.animate( +{ left: 120 }) 
.animate( { left: 240 }) 
.animate( { left: 0 }) 
.animate( { left: 240 }) 
.animate( { left: 120 月: 
bE 
7) 
</scrlpt> 


<div class="blue"></div> 
<dv class="red"> </div> 
<div class="egreen"></dIv> 
<div class="red pos"> </div> 


减 
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图 5.1 过 滤 指 定 类 元 素 并 为 其 绑 定 动画 
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在 上 面 代码 中 ， 文 档 包 含 4 个 <div> 标签 ， 其 中 有 两 个 <div> 标签 设置 了 red 类 名 ， 在 设置 red 类 名 的 
<div> 标签 中 有 一 个 是 复合 类 ， 包含 red 和 pos 类 。 在 页 面 初始 化 事件 处 理 吨 数 中 ,使 用 jQuery 因数 匹配 文 
档 中 所 有 的 div 元 素 ， 然 后 为 它们 绑 定 click 事件 。 在 事件 处 理 函 数 中 检测 每 个 元 素 是 否 包 含 red 类 。 如 有 果 
包含 ， 则 为 它 绑 定 系列 动画 ， 实 现 当 用 户 单 击 红色 盒子 时 ， 它 能 够 左右 摇摆 显示 。 

【源码 解析 】 

jQuery 通过 jQuery.fn.extend0 方法 为 jQuery 对 象 扩展 了 hasClass0) 方法 ， 代 人 如 下 : 


// 检查 当前 的 元 素 是 否 含有 茶 个 特定 的 类 ， 如 果 有 ， 则 返回 tme 
hasClass: function (Selector) { 


var className, elem, 1// 将 要 检查 的 类 和 名 selector 赋值 给 className 

-二 /Wi 为 选择 器 选择 的 当前 要 检查 的 jQuery 对 象 数 组 的 长 度 
className =" "+ selector + " ": 
while ((elem = this[i++])) { / 循环 检查 每 个 DOM 元 素 的 类 名 


//elem.nodeType 一 一 1， 判断 当前 DOM 节点 的 节点 类 型 ，1 表示 元 素 节 点 
//getClass(elem)， 获 取 当 前 DOM 节点 已 经 存在 的 类 名 
/stripAndCollapse(getClass(elem))， 表 示 移 除 当 前 DOM 节点 类 名 里 的 制 表 符 、 换 行 符 、 回 车 符 等 
//indexOf(className)， 开 始 在 当前 DOM 节点 的 类 名 里 检索 是 否 有 要 检查 的 类 名 className， 如 果 大 于 等 
/于 0， 表示 存在 ,返回 tue， 跳 出 函数 
lf (elem.nodelype =——= 1 KK 
(" "+ stripAndCollapse(getClass(elem))+" ").mndexOf(className)> -1) { 
returmn true; 
} 


bE 
return false: 


5.1.2 ”定位 对 和 象 


使 用 eq0 方法 可 以 获取 当前 jQuery 对 象 中 指定 下 标 位 置 的 DOM 元 素 ， 返 回 jQuery 对 象 ， 当 参数 大 于 
等 于 0 时 为 正 回 选 取 ， 如 0 代表 第 一 个 ，! 代表 第 二 个 。 当 参数 为 负数 时 为 反 回 选取 ， 如 -1 为 倒数 第 一 个 。 
eq0 方法 的 用 法 如 下 : 

eq(lndex) 

参数 mdex 是 一 个 整数 值 ， 从 0 开始， 用 来 指定 元 素 在 jQuery 对 象 中 的 下 标 位 置 。 

宣 ' 提示 : get(index) 方法 也 可 以 获取 指定 下 标 位 置 的 元 素 ， 不 过 该 方法 返回 的 是 DOM 元 素 。 

【示例 】 针 对 5.1.1 节 示 例 ， 使 用 eq0 方法 可 以 精确 选取 出 第 2 个 <div> 标签 ， 并 为 其 绑 定 一 组 动画 ， 
此 时 第 4 个 <div> 标签 (第 2 个 红色 盒子 ) 就 没有 拥有 该 动画 行为 。 

$(function(){ 

$("div").eq(1).click(functionO+ // 为 第 2 个 div 元 系 绑 定 系列 动画 
S(this) 
.animate( { left: 120 }) 


.animate( { left: 240 }) 
.animate( { left: 0 :) 


* 118 。 


第 D 章 过 流 JQUerY 对 象 


> /pp 
.animate({ left: 240 }) 
.animate({ left: 120 }): 
}); 
月 
【源码 解析 】 


jQuery 通过 jQuery 包 = jQuery.prototype= 人 方式 直接 为 jQuery 对 象 扩 展 eq0) 方法 ,代码 如 下 : 


/获取 当前 jQuery 中 第 i 个 位 置 的 元 素 ， 人 然后 把 它 转换 为 jQuery 对 象 返回 
eq: function (1) { 
var len = this.leneth, /获取 jQuery 对 象 长 度 
j= 医 十 (i<031en :0); W 如果 i 为 负数 ， 则 从 右 向 左 定位 取 值 ， 如 果 为 正 数 ， 则 从 左 向 右 定 位 取 值 
return this.pushStack( >= 0 &&j < len? [this[]] :中 如 果 经 过 处 理 后 的 j 介 于 length 内 ， 则 取得 DOM 元 素 ， 
/ 并 封装 为 数组 ， 否 则 设 为 空 数组 
1/ 最 后 使 用 pushStack0 方法 把 数组 中 的 元 素 合 并 到 this 对 象 上 ， 即 jQuery 对 象 


5.1.3 超级 过 滤 


使 用 filter0 方法 可 以 租 选 出 与 指定 表达 式 匹 配 的 元 素 集合 。 用 法 如 下 : 
filter(exprlob]lele|fn) 


回 expr: 选择 着 表 达 式 。 
加 obj: jQuery 对 象 ， 以 匹配 当前 的 元 素 。 | 
回 ele: 用 于 匹配 元 素 的 DOM 元 素 。 | 
加 包 : 丽 数 function(index)， 用 来 作为 测试 元 素 的 集合 。 它 接收 一 个 参数 index， 这 是 元 素 在 jQuery 集 
合 的 索引 。 在 函数 内 ，this 指 的 是 当前 的 DOM 元 素 。 | 
【示例 1】 使 用 filter0 方法 从 $("div") 所 匹配 的 div 元 素 集 合 中 过 滤 出 包含 red 类 的 元 素 ， 然 后 为 这 些 元 
素 定 义 红色 背景 ， 演 示 效 果 如 图 5.2 所 示 。 
<script> 
$(functionO{ 
$("div").filter(".red").css("backeround-color"."red"): 
所 
</script> 
<dv class="blue">class="blue"</div> 
<dv class="red"~>class="red"</dIv> 
<dv class="ereen">class="ereen"</dIv> 
<div class="red pos">class="red pos"</div> 
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图 5.2 使 用 filter0 方法 过 滤 元 素 1 
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痊 提示 : filter( 方法 还 可 以 有 多 个 表达 式 ， 表 达 式 之 间 通 过 过 号 进行 分 隔 ， 这 样 可 以 过 滤 更 多 符合 不 
同 条 件 的 元 素 。 例 如 ， 下 面 代码 将 匹配 文档 中 的 <div class="blue"><div class="red"> 和 <div 
class='"Tred pos"> 三 个 标签 ， 并 设置 它们 的 背景 色 为 红色 。 

$(function(O { 
$("div").filter(".red,.blue").css("backeround-color","red"): 
ol 


【示例 2】 使 用 filter0 方法 从 $C"p") 所 匹配 的 p 元 素 集合 中 过 滤 出 包含 两 个 span 子 元 素 的 标签 ， 然 后 为 
这些 元 素 定义 红色 背景 ， 演 示 效 果 如 图 5.3 所 示 。 
| <scrlpt> 
$(function(){ 
$("p").filter(function(index) { 
return $("span", this).length == 2: 
1}).css("backeround-color"."red"); 


月 

</script> 

<p><span class="red"> 床 前 明月 光 ， 疑 是 地 上 和 霜 。</span></p> 
<p><span> 举 头 望 明 月 ，</span><span> 低头 思 故 乡 。</span></p> 
<p> 独 在 异乡 为 异 客 ， 每 着 佳节 信和 思 亲 。</p> 

<p> 遥 知 兄弟 登高 处 ， 遍 插 荣 黄 少 一 人 。</p> 


所 
2 es] caUsers\B\Documents\ ~ © 
床 前 明月 光 ， 疑 是 地 上 潭 。 


举 头 望 明月 ， 低 头 思 故 儿 
独 在 异 多 为 异 寡 ， 每 着 佳节 信和 思 杀 。 
递 知 兄弟 登高 处 ， 遍 播 床 葛 少 一 人 。 


图 5.3 使 用 flter0 方法 过 滤 元 素 2 


| filter0 方法 包含 的 参数 函数 能 够 返回 一 个 布尔 值 ， 在 这 个 函数 内 部 将 对 每 个 元 系 计 算 一 次 ， 工 作 原 理 
”类 似 $.each0 方法 ， 如 果 调 用 的 这 个 参数 函数 返回 人 alse， 则 这 个 元 素 被 删除 ， 否 则 就 会 保留 。 

在 示例 2 中 ，$("span", this) 将 匹配 当前 元 素 内 部 的 所 有 span 元 素 ， 然 后 计算 它 的 长 度 ， 如 果 当 前 元 素 
包含 了 两 个 sapn 元 素 ， 则 返回 tue， 否 则 返回 false。filter0 方法 将 根据 参数 返回 值 决 定 是 否 保留 每 个 匹配 
| 元素。 

/ 由 于 参数 函数 可 以 实现 各 种 复杂 的 计算 和 人 处理 ， 所 以 使 用 和 包 ter( 血 ) 比 flter(expr) 更 为 灵活 。 用 户 可 以 在 
” 参数 函数 中 完成 各 种 额外 的 任务 ， 或 者 为 每 个 元 素 执行 添加 附加 行为 和 操作 。 
| 【源码 解析 】 
| jQuery 通过 jQuery.fn.extend0 方法 为 jQuery 对 象 扩 展 了 filter0 方法 ， 代 人 码 如 下 : 
filter: function (selector) { 
returmn this.pushStack(winnow!(this, selector || [|, false)): 


} 
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上 面 代码 通过 调用 私有 清 数 winnow0 处 理 参数 ， 然 后 把 返回 的 匹配 集合 传递 给 pushStack0 方法 ， 由 | 
pushStack0 方法 把 匹配 集合 转换 为 jQuery 对 象 返回 。 | 

pushStack0O 是 jQuery 的 工具 方法 ， 通 过 jQuery.fn = jQuery.prototype = {方式 直接 添加 到 原型 对 象 中 ， 
其 源码 如 下 : 


1/ 把 传人 的 对 象 和 默认 的 jQuery 对 象 合并 ， 返 回合 并 后 的 新 的 jQuery 对 象 
pushstacKk: function (elems) { 
/构建 一 个 新 的 jQuery 对 象 
/ 使 用 合并 函数 ， 把 两 个 参数 数组 连接 起 来 
var ret = JQuery.merge(this.constructor(), elems); 
// 将 旧 jQuery 对 象 添 加 到 堆栈 ( 作为 参考 )， 可 以 使 用 end0 返回 这 个 jQuery 对 象 
ret.prevObject = this: 
/返回 新 的 jQuery 对 象 (元素 集合 ) 
returmn ret: 
} 
可 以 看 到 ， 前 先 新 建 一 个 ret 对 象 ， 使 用 工具 jQuery.merge0 把 参数 数组 elems 合并 到 新 建立 的 jQuery / 
对 象 中 ， 然 后 设置 ret 对 象 的 上 级 元 素 为 this， 返 回 ret。 | 
winnow( 是 一 个 私有 图 数 ， 用 来 过 滤 数 据 集 ， 代 但 如 下 : 


/ 根据 不 同 的 selector 类 型 ， 调 用 grep0 方法 
//grep0 方法 是 在 一 个 类 数组 中 ， 根 据 selector 找到 符合 要 求 的 elems， 并 把 结果 返回 
/ 接收 的 selector 可 以 是 函数 、 条 件 选 择 磊 、DOM 元 素 或 jQuery 对 象 
function winnow(elements, qualifier, not) { 
if (jQuery.isFunction(qualifier)) { /这 里 定义 了 selector 可 以 是 函数 
// 使 用 grep0 在 elements 中 找到 符合 selector 的 元 素 
return JQuery.erep(elements, function (elem, 1) { 
/ 筛选 中 调用 qualifier,“!!” 用 于 强制 类 型 转换 为 boolean 
retum ‘i'qualifier.call(elem, 1, elem) !— not: 


过 


} 
/单个 元 素 
1 (qualifier.nodeType) { 
//elements 中 遍历 每 个 元 素 ， 是 不 是 等 于 传 来 的 node 
return JQuery.erep(elements, tunction (elem) { 
retum (elem —= qualifier) !—— not: 
DE 
} 
// 类 数组 ， 如 jQuery 对 象 、 参 数 对 象 、 数 组 等 
(typeof qualifier !(— "string") { 
return JQuery.erep(elements, tunction (elem) { 
return (IndexOt.call(qualifier, elem) > -1) ‘=— not: 
)); 
} 
//elements 是 qualifier， 和 筛选 条 件 变 成 了 filtered ( qualifier.nodetype )， 删 除 重复 的 结果 
L (risSimple.test(qualifier)) { 
return JQuery.filter(qualifier, elements, not): 
} 
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qualifier = jQuery.filter(qualifier, elements): 
return JQuery.erep(elements, function (elem) { 

// 如果 qualifier 是 jQuery 元 素 ， 则 看 每 个 elem 是 否 在 qualifier 中 

retum (IndexOt.call(qualifier, elem) > -1) ‘== not && elem.nodeTYype —=— 1: 
)); 


5.1.4 包含 过 滤 


使 用 has0 方法 可 以 保留 包含 特定 后 代 的 元 妹 ， 删 除 那 些 不 含有 指定 后 代 的 元 素 。 用 法 如 下 : 
has(expr) 


参数 expr 可 以 是 一 个 jQuery 选择 器 表达 式 ， 也 可 以 是 一 个 元 素 或 者 一 组 元 素 ， 将 会 从 给 定 的 jQuery 
对 象 中 重新 创建 一 组 匹配 的 jQuery 对 象 。 提 供 的 选择 融会 一 一 测试 每 个 元 素 的 后 代 ， 如 果 元 素 包 含 了 与 
expI 表达 式 相 匹配 的 子 元 素 ， 则 将 保留 该 元 素 ， 否 则 就 会 删除 该 元 巡 。 
【示例 】 以 5.1.3 节 示 例 2 为 基础 ,使 用 has0 方 法 从 $("p") 所 匹配 的 p 元 素 集合 中 过 滤 出 包含 类 名 为 
red 的 span 子 元 素 的 标签 ， 然 后 为 这 些 元 素 定 义 红 色 背 景 ， 效 果 如 图 5.4 所 示 。 
$(function() { 
$("p").has("span.red").css("backeround-color"."red"): 


月 

人 名 全 是 cAUsersVa\Documes ， x 

床 前 明月 关 ， 疑 是 地 上 刹 。 

举 头 望 明 月 ， 民 头 思 故 多。 

独 在 异乡 为 异 寡 ， 每 逢 佳节 人 思 款 。 

各 知 兄弟 登高 处 ， 遍 揪 全 英 少 一 人 。 

图 5.4 使 用 has0 方法 过 滤 元 素 

【源码 解析 】 
jQuery 通过 jQuery.fn.extend0 方法 为 jQuery 对 象 扩展 了 has0 方法 ,代码 如 下 : 
JQuery.fn.extend( { 


1/ 保留 包含 特定 后 代 的 元 素 ， 删 除 那 些 不 含有 指定 后 代 的 元 系 
has: function (target) { 
// 根据 参数 选择 器 在 当前 对 象 下 查找 所 有 目标 元 素 ， 并 返回 一 个 jQuery 
Var targets = JQuery(target, this), 
] = targets.length: 
// 使 用 filter0 方法 进行 过 滤 ， 返 回 过 滤 后 的 元 素 集合 
return this.filter(function () { 
varli= 0: 
for (; i<1it+) {W 逐个 欠 代 找到 的 包含 元 素 
/使 用 jQuerycontains0 函数 检测 当前 元 素 是 否 包 含 了 和 迭代 元 素 ， 如 果 包 含 ， 返回 tue， 保 留 ， 
/ 否则 删除 
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1{ (JQuery.contamns(this, targets[1])) + 
return true; 
上 


1 


5.1.5 是否 包 含 


is0 方法 可 以 根据 选择 着 、DOM 元 素 或 jQuery 对 象 来 检测 匹配 元 素 集 合 ， 如 果 其 中 至 少 有 一 个 元 素 符 
合 给 定 的 表达 式 就 返回 true; 如 宋 没 有 元 素 符合 ， 或 者 表达 式 无 效 ， 者 返回 false。 用 法 如 下 : 


1s(exprlob]jlelelin) 


expr: 供 匹 配 当 前 元 素 集 合 的 选择 华表 达 式 。 
obj: jQuery 对 象 ， 以 匹配 当前 的 元 素 。 
ele: 用 于 匹配 元 素 的 DOM 元 素 。 
甸 : 函数 function(index)， 用 来 作为 测试 元 素 的 集合 。 它 接收 一 个 参数 index， 这 是 元 素 在 jQuery 集 ， 
合 的 索引 。 在 函数 内 ，this 指 的 是 当前 的 DOM 元 素 。 
【示例 】 使 用 is0 方法 检测 $("p") 所 匹配 的 p 元素 集合 中 是 否 包 含 span 元 素 ， 如 果 包 含 则 进行 提示 , 否 
则 提示 错误 信息 。 
<script> 
$(function OQ { 
if($("p").is(function OQ { 
return $(this).has("span").length > 0: 
oe 当前 jQuery 对 象 中 包含 有 span 子 元 素 "); 
else 
alert(" 没有 找到 "): 


四 轴 辐 向 


}) 

</script> 

<p><span class="red"> 床 前 明月 光 ， 疑 是 地 上 和 霜 。</span></p> 
<p><span> 举 涉 望 明月 ，</span><span> 低头 思 故 乡 。<span></p> 
<p> 独 在 异乡 为 异 客 ， 每 着 佳节 倍 轧 亲 。</p> 

<p> 遥 知 兄弟 登高 处 ， 遍 插 荣 黄 少 一 人 。</p> 


当然 ， 不 管 jQuery 对 象 中 哪个 元 素 包 含 span 子 元 素 , 或 者 是 否 包含 多 个 span 子 元 素 ， 都 适用 于 该 方法 。 
【源码 解析 】 
jQuery 通过 jQuery.fn.extend0 方法 为 jQuery 对 象 扩 展 了 hasClass0 方法 ， 代 码 如 下 : 
1s: function (selector) { 
1/ 使 用 winnow0 方法 检测 this 是 否 包 含有 符合 条 件 的 元 素 
/ 如果 包 含有 元 素 ， 转 换 为 tue， 否 则 长 度 为 0 的 jQuery 转换 为 布尔 值 为 false 
retum I!Iwinnow( 
this, 
1/ 如 果 是 位 置 /相对 选择 占 ， 要 检查 返回 的 集合 中 的 成 员 资 格 
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1/ 如 $("p:first").is("p:last")， 如 果 文 档 中 包含 两 个 p， 则 不 能 返回 true 
typeof selector =— "string" && rneedsContext.test(selector) ? 
J]JQuery(selector) : 
selector || [], 
false 


)-length: 
} 


5.1.6 ”了 映射 项 数 


map0 方法 能 够 将 一 组 元 素 转换 成 其 他 数组 ， 不 论 是 否 为 元 素数 组 ， 如 值 、 属 性 或 者 CSS 样式 ， 都 可 
以 用 这 个 方法 来 建立 一 个 列表 。 用 法 如 下 : 
map(callback) 


参数 callback 表示 回调 函数 ， 将 在 每 个 元 素 上 调用 ,根据 每 次 回调 函数 的 返回 值 新 建 一 个 jQuery 并 返 
回 。 返 回 的 jQuery 对 象 可 以 包含 元 素 ， 也 可 以 是 其 他 值 ， 主 要 根据 回调 图 数 返 回 值 确定 。 

【 示例】 通过 map0 方法 把 所 有 匹配 的 input 元 素 的 value 属性 值 映 射 为 一 个 新 jQuery 对 象 ， 然 后 调用 
get0 方法 把 jQuery 对 象 包含 值 转换 为 数组 ， 再 调用 数组 的 join0 方法 把 集合 元 素 连接 为 字符 串 ， 最 后 调用 
jQuery 的 append0 方法 把 这 个 字符 串 附 加 到 <p> 标签 中 的 末尾 ， 演 示 效 果 如 图 5.5 所 示 。 

<script> 

$(function(){ 

$("#submit").click(function(O) { 
$("p").html("<h2> 提交 信息 <h2>").append( $("input").map(functionOf 


return $(this).val(): 
})-get0Jom("、 ") ); 
returmn false: 
月 
}) 
</script> 


<form action—"#"~> 
用 户 名 <input type="text" name="name" value="zhangsan"/><br><br> 
密码 <input type="password" name="password" value="12345678"/><br><br> 
网址 <input type="text" name="url" value="http://www.baidu.com/"/><br><br> 
<button id="submit'> 提交 </button> 

</form> 

<p></p> 


网 址 [htpywwwbaiducom' | 


Mm 
提交 信息 


zhangsan. 17345678. http-Aawnwnwr baadu .com 


图 5.5 映射 效果 
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> | 
【源码 解析 】 
jQuery 通过 jQuery.fn = jQuery.prototype= 人 方式 为 jQuery 对 象 扩展 map0 方法 ， 代 人 码 如 下 : 
/ 数据 映射 
/ 原型 方法 map0 跟 each 类 似 调 用 的 是 同名 静态 方法 ， 只 不 过 返回 的 数据 必须 经 过 另 一 个 原型 方法 pushStack0 方 
// 法 处 理 之 后 才 返 
map: function (callback) + 


/ 使 用 上 面 定 义 的 pushStack0 方法 ,合并 jQuery.map 返回 的 结案 集 ， 转 换 为 jQuery 对 象 
retum this.pushStack(JQuery.map(this, function (elem, 1) { 
Tetum callback.call(elem, 1, elem); 


Ps 
， 
jQuery.map0 是 一 个 工具 图 数 ， 使 用 jQuery.extend(f) 方法 ， 把 它 添加 到 jQuery 类 型 上 。 具 体 代码 如 下 : 
/arg 仅 供 内 部 使 用 


/ 将 一 个 数组 中 的 元 素 转 换 到 另 一 个 数组 中 
map: function (elems, callback, arg) { 
var length, value, 
1= 0., 
ret = [|; 
if (isArrayLike(elems)) { / 儿 通 过 数组 ， 将 每 个 项 目 转换 为 其 新 值 
length = elems.length: 
for (;i< length; i+HH) { 
value = callback(elems|1], 1, arg): 
1f (value !=null) { 
ret.push(value): 
} 
} 
} else { // 通过 对 象 上 的 每 个 键 
for (iin elems) { 
value = callback(elems|1], 1, are): 
if (value !=Dull) { 
ret.push(value): 
lL 
} 


} 
/ 平 铺 任何 能 套数 组 
retumm concat.apply(||, ret): 
5.1.7 ”排除 对 象 
使 用 not0 方法 能 够 从 匹配 元 素 的 集合 中 删除 与 指定 表达 式 匹 配 的 元 素 ， 并 返回 清除 后 的 jQuery 对 象 ， 


not(exprlele|fn) 


a 


源码 与 filter0 方法 


vd 


5.1.8 ”截取 三 段 


四 expr: 选择 表 字 符 串 。 
回 ele: DOM 元 素 。 
回 所: 用 来 检查 集合 中 每 个 元 素 的 函数 。 在 函数 内 ，this 指 的 是 当前 的 元 素 。 


【示例 】 通 过 not0 方法 排除 首页 导航 菜单 ， 然 后 为 其 他 菜单 项 定义 统一 的 样式 ， 效 果 如 图 5.6 所 示 。 


<script> 
$(fonctionO { 
$("#menu 1i").not(".home").css("color","red"); 清除 home 类 菜单 项 
}) 
</script> 


<Ul 1d=—"menu"> 
<li class="home"> 首页 </li> 


<]li> 论坛 < 

<li> 微 博 二 > 

<]i> 团购 二 1 这 

<li> 博客 < 
</ul> 

EE 
图 5.6 删除 被 匹配 的 部 分 元 素 

【源码 解析 】 


jQuery 通过 jQuery.fn.extend0 方法 为 jQuery 对 象 扩展 了 not0 方法 ,代码 如 下 : 
not: function (selector) { 

retum this.pushSstack(winnow(this, selector || [], true)); 
} 


的 源码 相似 ， 不 过 在 调用 winnow0 函数 时 ， 第 三 个 参数 设置 为 true， 它 表示 排除 的 


slice( 方法 能 够 从 jQuery 对 象 中 截取 部 分 元 末 ， 并 把 这 个 被 截取 的 元 素 集 合 装 在 一 个 新 的 jQuery 对 象 


中 人 返回， 用 法 如 下 : 


slice(start,[end|) 


Su start EE end Ee 0 其 中 start 人 开始 


选取 子 集 的 位 置 ， 第 一 个 元 素 是 0， 如果 该 参数 为 
数 ， 表 示 结 束 选 取 的 位 置 ， 如 果 不 指定 ， 则 表示 到 
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集合 的 结尾 ,但 是 被 截取 的 元 系 中 不 包含 end 所 指定 位 置 的 元 素 。 
【示例 】 通 过 slice0 方法 截取 第 三 、 四 个 菜单 项 ， 然 后 为 其 定义 样式 ， 演 示 效 果 如 图 5.7 所 示 。 
<script> 
$(function(){ 
$("#menu 1i").slice(2,4).css("color","red"): // 截取 第 三 、 四 个 菜单 项 


}) 

</script> 

<U] 1d="menu"> 
<]iclass="home'"> 首页 </li> 
<]i> 论坛 忆 ] 广 
<li> 微 博 </li> 
<]i> 团购 二 这 
<]i> 博客 </li> 

</ul> 


英 


= | CUserswg\Documentsv > 马 时 CUsarsvBD 


图 5.7 截取 片段 


【源码 解析 】 | 
jQuery 通过 jQuery.fn = jQueryprototype= 人 方式 直接 为 jQuery 对 象 扩展 slice0 方法 ， 代 码 如 下 ， 实 际 
上 它 是 JavaScript 数组 的 原生 方法 slice0 的 包装 。 

// 选取 一 个 匹配 的 子 集 
// 调用 JavaScript 原生 方法 slice0， 再 与 jQuery 默认 对 象 合 并 ， 返回 一 个 包含 结果 的 jQuery 对 象 
slice: function () { 

return this.pushStack(slice.apply(this, areuments)): | 
} / 


5.2 结构 过 小 


结构 过 滤 是 指 以 jQuery 对 象 为 基础 ， 查 找 父 级 、 同 级 或 者 下 级 元 素 ， 增 强 对 文档 的 控制 力 。 


5.2.1 查找 后 代 节 点 


DOM 提供 了 三 个 访问 后 代 市 点 的 方法 。 

加 ”childNodes: 通过 该 属性 可 以 遍历 当前 元 素 的 所 有 子 节点 。 

回 frstChild 和 1lastChild: 可 以 找到 当前 元 系 的 第 一 个 和 最 后 一 个 于 节操。 

加 ”getElementsByIaeName() 和 getElementByIDO: 通过 这 两 个 方法 可 以 准确 获取 后 代 元 素 。 
HTML5 新 添 如 下 属性 。 


* 127 。 


2 和 入门 到 精通 ( 币 课 精 编 县 


回 childElementCount: 返回 子 元 际 的 个 数 ， 不 包括 文本 节点 和 注释 。 

加 ”firstElementChild: 指向 第 一 个 子 元 床 。 

回 lastElementChild: 指 回 最 后 一 个 子 元 素 。 

jQuery 在 这 些 方法 基础 上 封装 了 多 个 操作 方法 ， 简 单 介绍 如 下 。 

1. children() 

children0 方法 能 够 取得 一 个 包含 匹配 的 元 素 集 合 中 每 个 元 素 的 所 有 子 元 素 的 元 素 集 合 。 用 法 如 下 : 
children([expr|) 


| 参数 expr 表示 jQuery 选择 器 表达 式 字 符 串 ， 用 以 过 滤 子 元 素 。 该 参数 为 可 选 ， 如 果 省 略 ， 则 将 匹配 所 
有 的 子 元 素 。 


< 佣 注意 : parents0 方法 将 查找 所 有 祖辈 元 素 ; children() 方法 只 考虑 子 元 素 ， 而 不 考虑 所 有 后 代 元 素 。 


【示例 1】 为 当前 列表 框 中 所 有 列表 项 定义 一 个 下 男 线 样 式 ， 如 图 5.8 所 示 。 


<script> 
$(function(){ 
$("#menu").children().css("text-decoration","underline"): 
}) 
</script> 
<U] 1d="menu"> 
<]i class='"home'> 首页 </li> 
=<] ls /I 
<li> 微 博 </1i> 
<]> 团购 </li> 
<]i> 博客 </i> 
</ul> 


A 


和 到 入 | ChUserh Documentsy = 加 


图 5.8 ”查找 所 有 子 元 素 


【示例 2】 为 children0 方法 传递 一 个 表达 式 ， 仅 获取 包含 home 类 的 子 元 素 。 


$(function(){ 
$("#menu").children(".home").css("text-decoration","underline"): 


用 
【源码 解析 】 
jQuery 通过 jQuery.each0 方法 ， 把 结构 过 滤 函 数 全 部 添加 到 jQuery. 血 原型 对 象 上 面 。 框 架 代 码 如 下 : 


// 迭代 结构 过 滤 函 数 ， 然 后 把 它们 添加 到 jQuery. 血 原型 对 象 上 面 
JQuery.each({ 
parent: tunction (elem) { }, 
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Wi 
和 


parents: function (elem) { }， 
parentsUntl: function (elem, 1, until) { }, 
next: function (elem) { }, 
prev: function (elem) { }， 
nextAll: function (elem) { +, 
prevAll: function (elem) { :, 
nextUntil: function (elem, i, until) { }, 
prevUntl: function (elem, 1, until) { }, 
siblings: function (elem) { }, 
children: function (elem) { }, 
contents: function (elem) {} 
}, function (name, fh) { // 封装 函数 
/在 jQuery 原型 对 象 上 添加 对 应 方法 
Query.fn[name| = function (until, selector) { 
var matched = jQuery.map(this, fn, until):; 
// 针对 prevUntil、nextUntil 、parentsUntil 方法 ， 设 置 范 围 限制 选择 天 
1f (name.slice(-$) (== "Until") { 
selector = until: 


} 
让 (selector && typeof selector 一 "string") { // 如 果 是 CSS 选择 需 字 符 串 
matched = jQuery.filter(selector, matched):// 则 直接 使 用 jQuery.filter0 进行 过 滤 


# 
if (this.length > 1) { 1/ 处 理 结果 集 
让 (lguaranteedUnique[name]) { // 删除 重复 项 
jQuery.uniqueSort(matched): 六 去 呈 


} 
/ 如果 是 父母 或 者 前 面 兄 弟 元 素 ， 则 反 回 排序 
1{ (rparentsprev.test(name)) { 


matched.reverse(): / 翻转 集合 顺序 
} 
4 
return this.pushStack(matched): 1 合并 结果 并 返回 


下 
1 
下 面 再 来 看 children0 方法 ， 代 码 如 下 : 


/ 取得 一 个 包含 匹配 的 元 素 集合 中 每 个 元 素 的 所 有 子 元 素 的 元 素 集合 
children: function (elem) { 


return siblings(elem.firstChild): 
} 
其 中 siblings0 是 内 部 私有 上 盟 数 ， 用 来 查找 相 令 元素， 源码 如 下 : 
/ 向 下 查找 所 有 相 邻 元 素 


// 参数 n 表示 当前 节点 ，elem 表示 截止 的 节点 
var siblings = function (n, elem) { 
var matched = ||: 
// 迭代 查找 下 一 个 相 邻 元 素 
tor (:;n: n=n.nextSibling) { 
// 如 果 节 点 类 型 为 元 素 ， 且 不 等 于 截止 元 素 ， 则 推 人 临时 数组 
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lf (n.nodeType =—— 1 &é& n !—— elem) 1 
matched.push(n): 
} 
} 
// 返回 结果 集 数组 
return matched: 


}; 


2. contents() 
使 用 contents0 方法 可 以 查找 匹配 元 素 内 部 所 有 的 子 节 点 ， 包 括 文 本 节点 。 如 果 元 素 是 一 个 过 ame， 则 
查找 文档 内 容 。 
该 方法 没有 参数 ， 功 能 等 同 于 DOM 的 childNodes。 
【源码 解析 】 
/查找 匹配 元 素 内 部 所 有 的 子 节点 (包括 文本 节点 ) 
contents: function (elem) { 
// 如 果 元 素 是 一 个 ame， 则 查找 文档 内 容 
1{ (nodeName(elem, "lframe")) { 
return elem.contentDocument: 
} 
/支持 : 仅 限 正 9-11、iOS 7、Android Browser <= 4.3 
/将 模板 元 素 视 为 浏览 硕 中 不 支持 的 元 素 
1{ (nodeName(elem, "template")) { 
elem = elem.content || elem: 


} 

/ 合并 所 有 子 节点 ， 并 返回 

retuml JQuery.merge([|, elem.chlldNodes): 
} 


3. find() 

使 用 find0 方法 能 够 查找 所 有 后 代 元 素 中 ， 所 有 与 指定 表达 式 匹配 的 元 素 。 这 是 一 个 找 出 正在 处 理 的 元 
素 的 后 代 元 素 的 好 方法 ， 而 children0 方法 仅 能 够 查找 子 元 素 。 用 法 如 下 : 

find(exprlobjlele) 


回 expr: 用 于 查找 的 表达 式 。 

加 ”obj: 用 于 匹配 元 素 的 jQuery 对 象 。 

回 ele: DOM 元 素 。 

【示例 3】 使 用 jQuery 函数 获取 页 面 中 body 的 子 元 素 div， 然 后 分 别 调用 children0 和 find0 方法 获取 其 
包含 的 所 有 div 元 素 ， 同 时 使 用 contents0 方法 获取 其 包含 的 节点 。 在 浏览 器 中 预览 ， 可 以 看 到 children("div") 
包含 3 个 元 素 ，find("div") 返回 5 个 元 素 。 而 contents0 返回 7 个 元 素 ， 其 中 包含 两 个 文本 节点 。 

<scrIipt> 

$(function () { 

var div = $("body > div"): 
console.log(div.children("div").length): // 返回 3 个 div 元 素 
console.log(div.find("div").length): // 返回 5 个 div 元 素 
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console.log(div.contents().length); // 返回 7， 包括 5 个 div 元 率 ，2 个 文本 节点 (空格 ) 
}) 
</script> 
<div> 
<div> 
<div> 春 虐 不 觉 晓 ，</div> 
<div> 处 处 闻 啼 鸟 。</div> 
</div> 
<div> 夜来 风雨 声 ，</div> 
<div> 花 落 知 多 少 。</div> 
</div> 


【源码 解析 】 
jQuery 通过 jQuery.fn.extend0 方法 为 jQuery 对 象 扩 展 了 find0 方法 ， 代 人 码 如 下 : 


find: function (selector) { /在 已 生成 的 DOM 中 按照 selector 查找 对 应 元 于 
Var 1, Tet, 
len = this.length, 
self = this: 
// 如果 selector 不 是 string， 调 用 jQuery 的 filter0 方法 ， 过 滤 的 条 件 是 一 个 function， 其 中 调用 了 contains0 方法 
1{ (typeot selector !(=— "string") + 
//jQuery(selector) = jQuery.init(selector) 调用 flter0 方法 ， 得 到 符合 条 件 的 新 jQuery 对 象 
retum this.pushStack(JQuery(selector).filter(function () + 
for (1= 0;1< len; +) { 
1/ 裔 历 self 中 的 每 个 元 素 ， 查 看 是 否 有 this， 如 果 有 则 返回 rve。sel 和 出 是 祖先 ，this 是 被 检测 的 元 素 
1{ (JQuery.contams(selfl1|, this)) { 


return true: 
} 
} 

上 
} 
ret = this.pushStack([]): //selector 拼接 一 下 ， 然 后 添加 的 elem 是 空 
for (i=0:i<len:itt) { //this 是 调用 find 的 jQuery 对 象 ，ret 是 全 局 jQuery 对 象 

jQuery.find(selector, self[i], reb:/ 调用 Sizzle， 把 结果 放 到 ret 里。 根据 selector， 把 selfli] 中 符合 selector 


/ 的 结果 放 到 ret 里面 | 


} 
// 每 次 find 之 后 ， 如 果 匹 配 多 个 元 素 ， 则 调用 jQuery.uniqueSort 去 一 下 重复 项 目 ， 最 后 返回 最 终结 果 rect 
retum len > 1 ? ]QuerIy.UnlquesSort(Tet) : Tet: 


5.2.2 查找 祖先 元 素 


DOM 使 用 parentNode 属性 可 以 访问 父 元 素 。 不 过 jQuery 提供 了 更 多 方法 ， 方 便 用 户 访问 不 同 层级 的 

祖先 元 素 。 | 
1. parents() ] 
parents( 方法 能 够 查找 所 有 匹配 元 素 的 祖先 元 素 ， 不 包含 根 元 素 。 用 法 如 下 : 


parents([expr]) 
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| 参数 expr 表示 jQuery 选择 器 表达 式 字符 串 ， 用 以 过 滤 祖 先 元 素 。 该 参数 为 可 选 ， 如 果 省 略 ， 则 将 匹配 
所 有 元 素 的 祖先 元 素 。 
【示例 1】 查 找 所 有 匹配 img 元 素 的 祖先 元 素 ， 并 为 它们 定义 统一 的 边框 样式 ， 效 条 如 图 5.9 所 示 。 
<script> 
$(function(){ 

$("Impg").parents().css(1"border":"solid 1px red","marpin":"10px"}); 

alert($("imge").parents().length): /1 返回 4， 分别 是 span、div、body 和 html 


}) 
</script> 
<div> 
<span> 
<lmip src="limages/bg.jpe" /> 
</span> 
<meg src="l1mages/bg.jpe" /> 
</div> 


图 5.9 ”查找 所 有 祖先 元 素 


六 提示 : parents0 方法 将 查找 所 有 匹配 元 素 的 祖先 元 素 ， 如 果 存 在 重合 的 祖先 元 素 ， 则 仅 记录 一 次 。 可 
以 在 parents( 参数 中 定义 一 个 过 滤 表 达 式 ， 过 滤 出 符合 条 件 的 祖先 元 素 。 


【源码 解析 】 
parents() 方法 与 children( 方法 的 源码 位 置 相同 ， 有 具体 源码 如 下 : 
parents: function (elem) { 


retum dir(elem, "parentNode"): 
} 


其 中 dir0 是 一 个 私有 函数 ， 被 parentsO 以 及 下 面 多 个 结构 过 滤 方 法 使 用 ， 具 体 源码 如 下 : 


/查找 DOM 树 上 当前 元 素 在 某 个 方向 上 的 同 级 或 祖先 节点 
var dir = function (elem, dr untl) { 
var matched = [|], 
truncate = until !== undefined: 


1 近代 
while ((elem = elem[dir]) && elem.nodeType !== 9) 1 禁止 夫 代 根 节 点 
if (elem.nodeType —= 1) { // 仅 限 元 素 节 点 


if (troncate && jQuery(elem)istuntiD) { 如 果 达 代 到 截止 的 节点 ， 则 停止 迭代 
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break: 
} 
matched.push(elem): 1// 推 入 临时 数组 
} 
} 
return matched: /返回 匹配 的 结果 集 
} 
2. parent() 
使 用 parent0 方法 可 以 取得 一 个 包含 所 有 匹配 元 素 的 唯一 父 元 素 的 元 素 集合 。 用 法 如 下 : 


parents([expr|) 


参数 expr 表示 jQuery 选择 器 表达 式 字 符 串 ， 用 以 过 滤 父 元 素 。 该 参数 为 可 选 ， 如 果 省 略 ， 则 将 匹配 所 
有 元 系 的 唯一 父 元 素 。 | 
【示例 2】 针对 示例 1， 将 parents0 方法 替换 为 parentO 方法 ,将 查找 所 有 匹配 的 img 元 素 的 父 元 素 ， 并 | 
为 它们 定义 统一 的 边框 样式 ， 演 示 效 果 如 图 5.10 所 示 。 
$(function(O){ 
$("1me").parent().css({"border":"solid lpx red","marein":" 10px"}): 
$("ime").parent(.each(function() {alert(this.nodeName)}); // 提示 SPAN 和 DIV 元 素 


图 5.10 查找 所 有 父 元 素 


【源码 解析 】 
parent( 方法 与 children0 方法 的 源码 位 置 相同 ， 上 有 具体 源码 如 下 : 
parent: function (elem) { 
var parent = elem.parentNode:/ 获取 父 元 素 
// 如 果 存 在 且 不 为 根 节点 ， 则 返回 ， 否则 返回 null 
return parent && parent.nodeType !== 11 ? parent : null: 
} 


3. parentsUntil() 
使 用 parentsUntil0 方法 可 以 查找 当前 元 素 的 所 有 父 大 元 素 ， 直 到 遇 到 匹配 的 那个 元 素 为 止 。 用 法 如 下 : 
parentsUntl(|exprlelement|| ,filter|) 


参数 说 明 如 下 : 
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加 expr: 用 于 沛 选 祖先 元 素 的 表达 式 。 

加 element: 用 于 入选 祖先 元 素 的 DOM 元 素 。 

回 flter: 字符 串 ， 其 中 包含 一 个 选择 表达 式 匹 配 元 素 。 
如 果 省 略 参数 ， 则 将 匹配 所 有 祖先 元 素 。 


尖 提示 : 如 果 提供 的 jQuery 代表 了 一 组 DOM 元 素 ，.parentsUntil0 方法 也 能 找 遍 所 有 元 素 的 祖先 元 素 ， 
直到 过 到 一 个 跟 提 供 的 参数 匹配 的 元 素 时 才 会 停 下 来 。 这 个 返回 的 jQuery 对 象 里 包含 了 所 有 找 
到 的 父 华 元 素 , 但 不 包括 那个 选择 器 匹配 到 的 元 素 。 


| 【示例 3】$0li1317 将 匹配 三 级 菜单 下 的 第 一 个 列表 项 ， 然 后 使 用 parentsUntil(.u1") 方 法 获取 它 的 所 有 
| 祖先 元 素 ， 但 是 只 包含 <ul class="u1"> 标签 范围 内 的 元 素 ， 最 后 为 查找 的 祖先 元 素 定 义 边框 样式 ， 演 示 歼 
果 如 图 5.11 所 示 。 


<script> 
$(function(){ 
$(11.131').parentsUntil(C.u1').css({"border":"solid 1px red","marein":"10px"}): 
| 月 
</script> 
| <ul class='"ul"> 一 级 荣 单 
<]l class="]11">1</11> 
<]l class="]2">2 
<ul class="u2"> 二 级 菜单 
< class= "121">21</ 沾 > 
<]i class="]22">22 
| <ul class="u3"> 三 级 菜单 
| <]i class="]31">31</]i> 
<] class="132">32</]> 
<]1 class="133">33</]> 


| </ul> 

| < > 

<li class="item-c">C</i> 

| </ul> 

| <li> 

| =]i class="]3">3</]i> 

| </ul> 

| 所 13 | 所 Guusersg\Docume。 > 
| 图 5.11 查找 指定 范围 的 祖先 元 素 
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【源码 解析 】 
parentsUntil( 方法 与 children0 方法 的 源码 位 置 相同 ， 具 体 源码 如 下 : 
parentsUntil: function (elem, 1. Until) { 
return dir(elem, "parentNode", until): 
} 


其 中 parentNode 表示 DOM 元 素 属性 ， 访 问 父 元 素 ， 这 里 以 字符 串 形式 传递 。 
4. offsetParent() 


otfsetParent() 
该 方法 没有 参数 。offsetParent0 方法 仅 对 可 见 元 素 有 效 。 
六 提示 : 定位 元 素 就 是 设置 position 属性 值 为 Telative 或 absolute 的 祖先 元 素 。 


【源码 解析 】 
offsetParent( 方法 的 源码 位 于 CSS 定位 代码 段 部 分 ， 通 过 jQuery.fn.extend0 方法 扩展 ， 具 体 源 乌 如 下 : 
otfsetParent: function () { 
// 调用 映射 函数 
return this.map(function () { 
var offsetParent = this.offsetParent:// 获取 当前 元 素 的 定位 父 元 素 
1/ 循环 查找 祖先 元 素 中 被 定义 了 相对 定位 、 绝 对 定位 或 固定 定位 的 元 素 
while (offsetParent &é& JQuery.css(offsetParent, "position") ——— "static") { 
otfsetParent = offsetParent.offsetParent: 
} 
1/ 返回 定位 元 素 ， 如 果 不 存 在 ， 则 返回 根 节点 
return ofisetParent || documentElement: 
}); 
} 


< 注意 : 在 以 下 情况 下 ，offsetParent( 方法 将 返回 documentElement。 
加 ”iframe 中 的 元 素 ， 此 方法 将 返回 父 窗口 的 documentElement。 
回 ”隐藏 元 素 。 
加 body 或 html 元 素 。 


5. Cclosest() 
使 用 closest0 方法 可 以 从 元 素 本 喘 开 始 ， 逐 级 向 上 级 元 素 匹 配 ， 并 返回 最 先 匹配 的 元 素 。 用 法 如 下 : 


closest(exprlobjectlelement) 


加 expr: 用 于 过 滤 元 素 的 表达 式 。 从 jQuery 1.4 开始, 也 可 以 传递 字符 串 数 组 ， 用 于 查找 多 个 元 素 。 

加 ”object: 用 于 匹配 元 素 的 jQuery 对 象 。 
加 element: 用 于 匹配 元 素 的 DOM 元 素 。 
Closest0 方法 会 首先 检查 当前 元 素 是 否 匹 配 ， 如 果 匹 配 则 直接 返回 元 素 本 和 丑 。 如 果 不 匹 配 则 向 上 查找 
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父 元 素 ， 一 层 一 层 往 上 ， 直 到 找到 匹配 选择 天 的 元 素 。 如 果 没 找到 ， 则 返回 一 个 空 jQuery 对 象 。 

closest0 方法 与 parents() 方法 的 主要 区 别 如 下 : 

贸 ” 前 者 从 当前 元 系 开 始 匹 配 寻 找 ， 后 者 从 父 元 素 开 始 匹 配 寻 找 。 

加 ”前 者 逐 级 同上 查找 ， 直 到 发 现 匹 配 的 元 素 后 就 停止 卫 ， 后 者 一 直 辐 上 碍 找 直到 根 元 素 ， 然 后 把 这 

些 元 素 放 进 一 个 临时 集合 中 ， 再 用 给 定 的 选择 天 表达 式 去 过 滤 。 

加 ”前 者 返回 0 或 1 个 元 素 ， 后 者 可 能 包含 0 个 、1 个 ， 或 者 多 个 元 素 。 

【示例 4】 以 示例 3 为 基础 ， 在 下 面 示例 中 $(1.131") 将 匹配 三 级 菜单 下 的 第 一 个 列表 项 ， 然 后 使 用 
closest("u1") 方法 获取 祖先 元 素 中 最 靠近 当前 元 素 的 父 元 素 ， 最 后 为 这 个 元 素 定 义 边 框 样式 ， 演 示 歼 果 如 图 
5.12 所 示 。 

$(function() { 

$(11.131').closest("ul").css({"border":"solid 1px red","marpin":"10px"}): 


bi 
二 二 下 CLsers\B Documentey testd.htrl "上 | 一 caUsara\giDorume... < 
图 5.12 查找 指定 的 父 元 素 
【源码 解析 】 


closest( 方法 的 源码 位 于 jQuery 过 滤 融 代码 段 部 分 ， 通 过 jQuery.fh.extend0 方法 扩展 ， 具 体 源 码 如 下 : 


closest: function (selectors, context) { 

Var cur, 
1=0, 
] = this.lenegth, 
matched = [], 
targets = typeof selectors !== "string" && jQuery(selectors): 根据 选择 需 查 询 目 标 

/ 位置 选择 需 永 远 不 会 匹配 ， 因 为 没有 _selection 上 下 文 

lf (IrneedsContext.test(selectors)) { 
for (i<Lit)t // 浊 代 jQuery 对 象 中 每 个 DOM 元 素 

/遍历 当前 元 素 所 有 父 节点 


tor (cur = this[1]:; cur && cur !== context; cur = cur.parentNode) { 


// 总 是 跳 过 文档 片段 

lf (cur.nodelype < 11 &c& (targets ? 
targets.index(cur) > -1 : // 存在 结果 集 ， 且 和 包含 当前 元 素 ， 则 返回 true 
/ 不 要 将 非 元 系 传 递 给 Sizzle 
cur.nodeType 一 一 1 && // 确定 DOM 元 素 ， 然 后 根据 选择 需 进 行 匹配 
J]JQuery.find.matchesSelector(cur, selectors))) { 
matched.push(cur); /把 匹配 到 的 元 素 推 人 数组 
break: / 发 现 目标 后 ， 即 跳出 循环 

} 
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} 


} 
/ 对 匹配 结果 进行 处 理 ， 如 果 存 在 ， 且 把 结果 集中 重复 项 去 除 ， 最 后 返回 
return this.pushStack(matched.length > 1 ? JQuery.uniqueSort(matched) : matched): 


5.2.3 ”查找 前 面 兄弟 元 素 


DOM 使 用 previousSibling 属性 访问 前 一 个 兄弟 节点 ，HIML 5 新 增 previousElementSibling 属性 访问 前 | 
一 个 相 邻 兄弟 元 素 。jQuery 提供 多 个 方法 向 前 访问 不 同类 型 的 兄弟 元 素 。 | 

1. prev() 

使 用 prev0 方法 可 以 获取 一 个 包含 匹配 的 元 素 集 合 中 每 个 元 素 紧 邻 的 前 一 个 同 非 元 素 的 元 素 集 合 。 用 | 


prev([expr]) 


参数 expr 表示 jQuery 选择 器 表达 式 字符 串 ， 用 以 过 滤 匹 配 元 素 。 该 参数 为 可 选 ， 如 果 省 略 ， 则 将 匹配 
所 有 上 一 个 相 邻 的 元 素 。 | 
【示例 1】 先 查找 类 名 为 red 的 p 元素, 然后 使 用 prev0 方法 查找 前 一 个 相 邻 的 p 元 素 ， 并 为 它 定义 边 
框 样式 ， 演 示 效 果 如 图 5.13 所 示 。 


<script> 
$(function() { 
$(".red").prev().css("border","solid 1px red"); 
}) 
</script> 
<p> 少 小 离 家 老大 回 ，</p> 
<p> 乡音 无 改 惨 毛 究 。</p> 
<p class="red"> 儿童 相 见 不 相识 ，</p> 
<p> 笑 问 客 从 何 处 来 。</p> 


Ee 


SIS 
少 小 离 家 老大 回 ， 


儿童 相 风 不 相识 ， 
军 问 等 欠 何 处 来 。 


图 $.13 ”查找 相 邻 的 前 一 个 元 素 
【源码 解析 】 
prev( 方法 与 children0 方法 的 源码 位 置 相同 ， 具 体 源 码 如 下 : 


prev: function (elem) { 
return sibling(elem, "previousSibling"): 
} 
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sibling0) 是 一 个 私有 函数 ， 用 来 查找 相 邻 的 元 素 ， 具 体 源 码 如 下 ; 


function sibling(cur, dir) { 
/ 获取 相 邻 节点 ， 如 果 相 邻 节点 不 为 元 素 ， 则 循环 查找 ， 直 到 节点 类 型 为 元 素 
while ((cur = cur[dir|) && curnodeType (— 1){} 
return cur:// 返回 找到 的 相 邻 元 素 

} 


参数 cur 为 当前 元 素 ，dir 表示 遍历 的 方向 属性 。 
2. prevAll() 
使 用 prevAll0 方法 可 以 查找 当前 元 素 之 前 所 有 的 同 碍 元 素 。 用 法 如 下 : 


prevAll [expr|) 
参数 expr 表示 jQuery 选择 天 表达 式 字 符 串 ， 用 以 过 滤 匹 配 元 素 。 该 参数 为 可 选 ， 如 果 省 略 ， 则 将 匹配 


所 有 上 面 同 辈 元 素 。 


【示例 2】 以 示例 1 为 基础 ， 先 查找 类 名 为 red 的 p 元素 ,然后 使 用 prevAll0 方法 查找 它 的 上 面 同辈 的 


所 有 Pp 元 系 ， 并 为 它 定 义 边 框 样式 ,演示 效果 如 图 5.14 所 示 。 


$(function(){ 
$(".red").prevAll("p").css("border","solid 1pX red"); 
}) 


a 一 和合 AUSserswBvDecurmentsw 一 忆 
少 小 部 家 老 六 四 ， 


必 童 相 风 不 相识 ， 
实 回 辕 从 何人 处 来 。 


图 5.14 向 前 查找 所 有 同辈 元 素 


【源码 解析 】 
prevAll( 方法 与 children0 方法 的 源码 位 置 相同 ， 具 体 源码 如 下 : 
prevAll: function (elem) { 
return dir(elem., "previousSibling"): 
|: 


3. prevUntil() 
使 用 prevUntil0 方法 能 够 查找 当前 元 素 之 前 所 有 的 同 夺 元 素 ， 直 到 过 到 匹配 的 那个 元 系 为 止 。 用 法 


如 下 : 


prevUntil([exprlele||.fil]) 

参数 说 明 如 下 : 

加 ”expr: 用 于 沛 选 祖先 元 素 的 表达 式 。 

加 ele: 用 于 筛选 祖先 元 素 的 DOM 元 系 。 

回 包 : 字符 串 ， 其 中 包 合 一 个 选择 表达 式 匹配 元 素 。 
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参数 为 可 选 ， 如 果 省 略 ， 则 将 匹配 所 有 上 面 同辈 元 素 。 

【示例 3】 以 示例 1 为 基础 ， 先 查找 类 名 为 red 的 p 元 素 ， 然 后 使 用 prevUntil("h1") 方 法 查找 hl 元 素 前 
面 的 所 有 同辈 元 素 ， 并 为 它 定 义 边 框 样式 ， 效 果 如 图 5.15 所 示 。 

<script> 

$(function OQ { 

$(".red").prevUntil("h1").css("border", "solid 1px red"): 

b 

</script> 

<hl> 回 乡 偶 书 </h1> 

<h2> 针 知 章 </h2> 

<p> 少 小 离 家 老大 回 ，</p> 

<p> 乡音 无 改 惨 毛 衰 。</p> 

<p class="red"> 儿童 相 见 不 相识 ，</p> 

<p> 舌 问 客 从 何 处 来 。<p> 


关 
让 三 | CAUsers\B\Documentsy = 0 | cAUsers\B\Docume 
可 乡 偶 书 
回 乡 个 


x 棕 捷 彭 。 
儿童 相 由 不 相识 ， 
爱 回 寄 从 何 处 来 。 


图 5.15 ”向 前 查找 指定 范围 的 同 非 元 素 


【源码 解析 】 
prevUntil0 方法 与 children0 方法 的 源码 位 置 相同 ， 具 体 源码 如 下 : 


prevUntl: function (elem, 1, until) { 
return dir(elem, "previousSibling", until): 
} 


5.2.4 查找 后 面 兄 弟 元 素 


DOM 使 用 nextSibling 属性 访问 后 一 个 兄弟 节点 ，HTML 5 新 增 nextElementSibling 属性 访问 后 一 个 相 


邻 兄 第 元 素 。jQuery 提供 3 个 回 后 查找 的 方法 ， 实 现 查 找 后 一 个 、 所 有 和 指定 范围 的 同 寿 元 素 。 | 
1. next() | 
使 用 next0 方法 可 以 获取 一 个 包含 匹配 的 元 素 集 合 中 每 个 元 素 紧 邻 的 后 面 同 辜 元 素 的 元 素 集 合 。 用 法 如 下 : | 
next([expr|) | 


参数 expr 表示 jQuery 选择 器 表达 式 字 符 串 ， 用 以 过 滤 匹 配 元 素 。 该 参数 为 可 选 ， 


如 果 省 略 ， 则 将 匹配 
有 下 一 个 相 邻 的 元 素 。 


所 
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【示例 1】 先 查找 类 名 为 Ted 尼 


<script> 
$(function() { 
$(".red").next("p").css("border","solid 1px red"): 
局 
</script> 
<p class="blue"> 少 小 离 家 老大 回 ，</p> 
<p> 乡音 无 改 蜂 毛 误 。</p> 
<p class='"red"> 儿童 相 见 不 相识 ，</p> 
<p> 笑 问 客 从 何 处 来 。</p> 


€ » EE 
少 小 咒 军 者 太 回 ， 


号 首 无 路 辟 十 案 ， 
儿童 相 风 十 相识 ， 


图 5.16 查找 相 邻 的 下 一 个 元 素 
【源码 解析 】 
next( 方法 与 children0 方法 的 源码 位 置 相 同 ， 具 体 源码 如 下 : 


next: function (elem) { 
return sibling(elem, "nextSibline"): 
} 


2. NextAll() 


使 用 nextAll0 方法 能 够 查找 当前 元 素 之 后 所 有 的 同辈 元 素 。 用 法 如 下 ; 


nextAll [expr|) 


参数 expr 表示 jQuery 选择 器 表达 式 字 符 串 ， 用 以 过 滤 匹 配 元 素 。 该 参数 为 可 选 ， 
所 有 下 面 的 同 奉 元 素 。 
【示例 2】 以 示例 1 为 基础 ， 先 查找 类 名 为 blue 的 p 元 素 ， 然 后 使 用 nextAll0 方法 
所 有 Dp 元 素 ， 并 为 它们 定义 边框 样式 ， 演 示 效 果 如 图 5.17 所 示 。 


$(function(){ 
$(".blue").nextAll("p").css("border","solid 1px red"): 
1) 


其 


所 re | CUsersv8vDocumentsv = 总 是 CUserswaDoc 


少 小 高 家 老大 回 ， 


上 区 音 元 改 若 万 豪 。 | 
比 间 寡 从 何 寻 来， | 


图 5.17 查找 上 面 所 有 同辈 的 p 元 又 
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p 元 素 ， 然 后 使 用 next0 方法 查找 它 的 下 一 个 相 邻 的 p 元 素 ， 并 为 它 定 
义 边框 样式 ， 演 示 效 果 如 图 5.16 所 示 。 


如 果 省 略 ， 则 将 匹配 


查找 它 的 上 面 同 寿 的 
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【源码 解析 】 
nextAll0 方法 与 children0 方法 的 源码 位 置 相同 ， 具 体 源 但 如 下 : 
nextAll: function (elem) { 


return dir(elem, "nextSibline"): 
b 


3. nextUntil() 
nextUntil() 方法 能 够 查找 当前 元 素 之 后 所 有 的 同 非 元 紊 ， 和 直到 过 到 匹配 的 那个 元 双 为 止 。 用 法 如 下 : 
nextUntil([explele||,fi]]|) 


参数 说 明 如 下 : 
回 expr: 用 于 和 饰 选 祖先 元 素 的 表达 式 。 
四 ele: 用 于 入 选 祖先 元 系 的 DOM 元 素 。 


加 全: 字符 串 ， 其 中 包含 一 个 选择 表达 式 匹配 元 素 。 


六 提示 : 如 果 提 供 的 jQuery 代表 了 一 组 DOM 元 素 ，nextUntil0 方法 也 能 找 遍 所 有 元 素 所 在 的 DOM 树 ， 
直到 遇 到 了 一 个 跟 提 供 的 参数 匹配 的 元 素 才 会 停 下 来 。 这 个 新 jQuery 对 象 里 包含 了 所 有 找到 的 

同 莫 元素， 但 不 包括 选择 器 匹配 到 的 元 素 。 | 

如 果 没 有 选择 器 匹配 ， 或 者 没有 提供 参数 ， 那 么 跟 在 后 面 的 所 有 同辈 元 素 都 会 被 选中 。 这 

就 跟 用 没有 提供 参数 的 nextAll0 效果 一 样 。 


【示例 3】 以 示例 1 为 基础 ， 先 查找 类 名 为 blue 的 Pp 元素， 然后 使 用 nextUntil(".red") 方法 查找 类 名 为 | 
red 的 元 素 前 面 的 所 有 同 非 元 素 ， 并 为 它 定 义 边 框 样式 ， 演 示 歼 果 如 图 5.18 所 示 。 | 


$(function(O){ 
$(".blue").nextUntil(".red").css("border","solid 1px red"): 


}) 
¢ | BE CE 
少 小 高 家 老大 回 ， 
儿童 相 见 不 相识 ， 
实 癌 竺 从 何 外 来。 
图 5.18 向 后 查找 指定 范围 的 同辈 元 素 
【源码 解析 】 


nextUntil() 方法 与 children() 方法 的 源码 位 置 相同 ， 有 具体 源码 如 下 : 


nextUntil: function (elem, 1, until) { 
return dir(elem, "nextSibline", until]):; 
} 
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5.2.5 查找 同辈 元 素 


使 用 siblings0 方法 可 以 获取 一 个 包含 匹配 的 元 素 集合 中 每 个 元 素 的 所 有 唯一 同 碍 元 素 的 元 素 集 合 。 用 
法 如 下 : 


siblings([expr|) 
| 参数 expr 表示 jQuery 选择 器 表达 式 字 符 串 ， 用 以 过 滤 匹 配 元 素 。 该 参数 为 可 选 ， 如 果 省 略 ， 则 将 匹配 
” 所 有 同辈 兄弟 元 素 。 


【示例 】 先 查找 类 名 为 red 的 p 元素, 然后 使 用 siblings("p 方法 查找 所 有 同辈 的 p 元 素 ， 并 为 它 定 义 
边框 样式 ， 演 示 效 果 如 图 5.19 所 示 。 


<script> 
$(function(){ 
$(".red").siblings("p").css("border","solld 1px Ted”): 
}) 
</script> 
<p class="blue"> 少 小 离 家 老大 回 ，</p> 
<p> 乡音 无 改 占 毛 衰 。</p> 
<p class='Ted"> 儿童 相 见 不 相识 ，</p> 
<p> 笑 问 客 从 何人 处 来 。</p> 


区 
* i 习 WUsersySNDGcumenisv > 总 中 是 CUserst8Deoc 


图 5.19 查找 所 有 同辈 的 p 元素 


【源码 解析 】 
siblings0 方法 与 children0 方法 的 源码 位 置 相同 ， 上 有 具体 源码 如 下 : 


siblings: function (elem) { 
return siblings((elem.parentNode || {}).firstChild, elem): 


5.3 特殊 操作 


jQuery 提供 了 多 个 对 jQuery 对 象 进行 特殊 操作 的 方法 ， 以 完成 特定 匹配 任务 。 


5.3.1 添加 对 象 


使 用 add0 方法 可 以 把 与 表达 式 匹 配 的 元 素 添加 到 jQuery 对 象 中 。 这 个 方法 可 以 用 于 连接 分 别 与 两 个 
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表达 式 匹 配 的 元 素 结 果 集 。 用 法 如 下 : 
add(exprlelelhtmllob]|,con|) 


参数 说 明 如 下 : 

ele: DOM 元 素 。 

html: HTML 片段 添加 到 匹配 的 元 素 。 

obj: 一 个 jQeruy 对 象 增加 到 匹配 的 元 素 。 

expr: 用 于 匹配 元 素 并 添加 的 表达 式 字 符 串 ， 或 者 用 于 动态 生成 的 HIML 代码 ， 如 果 是 一 个 字符 
串 数 组 ， 则 返回 多 个 元 素 。 

回 con: 作为 待 查找 的 DOM 元 素 集 、 文 档 或 jQuery 对 象 。 

【示例 】 先 查找 类 名 为 red 的 p 元 素 ， 然 后 使 用 siblings("p") 方法 查找 所 有 同辈 的 p 元素， 再 使 用 
add("h1,h2") 方法 把 一 级 标题 和 二 级 标题 也 添加 到 当前 jQuery 对 象 中 ， 最 后 为 新 的 jQuery 内 所 有 元 素 定义 
边框 样式 ,演示 效果 如 图 5.20 所 示 。 

<script> 

$(function(O{ 

$(".red").siblings("p").add("h1.h2").css("border","solid 1px red"): 

3 

</script> 

<hl> 回 乡 偶 书 </h1> 

<h2> 贺 知 章 </h2> 

<p class="blue"> 少 小 离 家 老大 回 ，</p> 

<p> 乡音 无 改 睁 毛 衰 。</p> 

<p class="red"> 儿童 相 见 不 相识 ，</p> 

<p> 笑 问 客 从 何 处 来 。</p> 


四 轴 加 向 


从- — | CAUsersMDocumentsy = 是 CaUserstavDocume.. 蕊 


区 小 离 家 老大 回 ， | 
儿童 相 风 不 相识 ， 


图 5.20 ”为 jQuery 对 象 添加 新 元 素 


【源码 解析 】 
在 jQuery 对 象 过 滤器 方法 代码 段 ， 使 用 jQuery.fpn.extend0 方法 添加 一 个 原型 方法 add0， 详 细 源 码 如 下 : 
/ 把 与 表达 式 匹 配 的 元 素 添 加 到 jQuery 对 象 中 。 这 个 方法 可 以 用 于 连接 分 别 与 两 个 表达 式 匹 配 的 元 素 结果 集 
add: function (Selector context) + 

/ 把 合并 后 的 集合 推 入 当前 jQuery 对 象 ， 并 返回 

return this.pushSstack( 

jQuery.uniqueSort( 1/ 去 重 
/把 add0 方法 匹配 的 元 素 与 当前 jQuery 包含 的 元 素 合 并 
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J]JQuery.merege(this.get(), JQuery(selector, context)) 


5.3.2 合并 对 象 
使 用 addBack0 方法 可 以 将 堆栈 中 的 元 素 集合 添加 到 当前 集合 中 。 该 方法 没有 参数 ， 直 接 调用 。 


六 提示 : jQuery 对 象 通过 闭 包 体 定义 了 一 个 堆栈 变量 ， 该 变量 可 以 跟踪 匹配 的 元 素 集合 的 变化 。 当 一 个 
DOM 遍历 方法 被 调用 时 ， 新 的 元 素 集合 推 入 堆栈 中 。 


下 面 结 合 一 个 示例 说 明 addBack0 方法 的 设计 思路 和 使 用 方法 。 
【示例 】 首 和 完 ， 使 用 $(".blue") 获取 第 一 段 文本 ， 然 后 使 用 $(".blue").nextAll0 获取 同 级 段落 文本 ， 分 别 
为 它们 设计 CSS 样式 。 


<script> 

$(function(){ 
$(".blue").css("border","solid 1px red"): 
$(".blue").nextAll().css("border","solid lpx red"): 

月 

</script> 

<p class="blue"> 少 小 离 家 老大 回 ，</p> 

<p> 乡音 无 改 鼎 毛 衰 。</p> 

<p class"red"> 儿童 相 见 不 相识 ，</p> 

<p> 笑 问 客 从 何 处 来 。</p> 


针对 上 面 示 例 ， 实 际 上 在 $(".blue").nextAllO 后 面 添加 addBack0 方法 ， 就 可 以 把 $0blue 和 $("'.blue"). 


nextAll0 两 个 不 同 jQuery 对 象 合并 在 一 起 ， 即 把 $(".blue") 匹配 的 DOM 集合 添加 到 $(".blue").nextAllO 匹 


配 的 DOM 集合 中 ， 从 而 保证 链 式 语法 的 连贯 性 。 
$(function () { 
$(".blue").nextAll().addBack().css("border", "solid lpx red"): 
1) 
【源码 解析 】 
在 jQuery 对 象 过 滤器 方法 代码 段 ， 使 用 jQuery.fn.extend0 方法 添加 一 个 原型 方法 addBackO， 详 细 源 码 
如 下 : 
// 将 堆栈 中 元 素 集 合 添加 到 当前 集合 中 
addBack: function (selector) { 
retum this.add(selector 一 null ? 
/如 果 没 有 传递 选择 占 ， 则 直接 把 前 面 的 匹配 集合 添加 到 当前 对 象 中 
/如 果 传 递 了 选择 器 ， 则 先 对 前 面 匹配 的 集合 进行 过 滤 ， 然 后 添加 到 当前 对 象 中 
thls.pTevOblect : thls.prevOblject.Hlter(selector) 
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5.3.3 返回 前 面 对 象 


使 用 end0 方法 能 够 回 到 最 近 的 一 个 “破坏 性 ”操作 之 前 ， 即 将 匹配 的 元 系列 表 变 为 前 一 次 的 状态 。 如 


果 之 前 没有 破坏 性 操作 ， 则 返回 一 个 空 


赃 提示 : 所 谓 破坏 性 就 是 指 任何 改变 jQuery 对 象 所 匹配 的 DOM 元 素 的 操作 ， 如 jQuery 对 象 的 add0、 
andSelf()、children()、filter()、find()、map()、next()、nextAll()、not()、parent()、parents()、 
prevO、PprevAlIO、siblingsO、sliceO 、clone0 方法 。 当 调用 这 些 方 法 之 后 ,将 会 改变 jQuery 对 


象 所 匹配 的 DOM 元 素 。 


【 示例】 设计 为 <p> 标签 定义 边框 样式 ， 然 后 再 为 <div> 标签 定义 背景 色 。 
简单 的 做 法 就 是 : 重新 换 一 行为 <div> 标签 定义 样式 。 不 过 现在 利用 jQuery 定义 的 end0 方法 ， 可 以 保 
持 在 一 行内 完成 两 行 任 务 ， 即 当 调 用 fnd("p".cssO 后 ， 再 调用 end0) 方法 返回 $0div 方法 匹配 的 jQuery 


对 象 ， 而 不 是 ftnd0 方法 所 查找 的 jQuery。 
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<script> 
$(function OQ { 
$("div").find("p").css({ "border": "solid 1px red", "marein": "4px" }) 
.end().css({ "backeround": "#ddd", "color": "#222", "paddine": "4px" }):; 
}) 
</script> 
<div> 
<p> 少 小 离 家 老大 回 ， 乡 音 无 改 蛙 毛 喜 。</p> 
<p> 儿童 相 见 不 相识 ， 笑 问 客 从 何 处 来 。</p> 
</dIv> 


在 上 面 代码 中 ， 首 先 为 $C('div").find("p") 定义 的 jQuery 所 包含 的 元 素 定义 边框 样式 ， 然 后 调用 end0 方 
法 ,返回 上 一 次 匹配 的 jQuery 对 象 ， 即 $0div 定义 的 jQuery 对 象 ， 再 为 该 对 象 调 用 css0 方法 定义 背景 样 


式 ， 最 后 显示 效果 如 图 5.21 所 示 。 


二 区 刘 ECnUsersvs\Documents > & 


英 


全 CUsers\a Dor 


图 5.21 end0 方法 应 用 


【源码 解析 】 


在 jQuery 核心 代码 部 分 ， 使 用 jQuery.fh = jQuery.prototype = 全 方式 添加 一 个 原型 方法 end0， 话 细 源 


个 如 下 : 


end: function () 4 
return this.prevObject || this.constructor( ): 


} 


this.prevObject 表示 jQuery 维护 的 一 个 元 素 集 合 ， 用 来 你 护 在 破坏 性 操作 之 前 的 jQuery 匹配 集合 ， 如 


果 不 存在 ， 则 返回 一 个 空 jQuery 对 象 。 
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]Query 最 核心 的 功能 就 是 DOM 操作 。DOM 是 由 W3C 制定 的 ， 为 HIML 和 XML 
文档 编写 的 应 用 程序 接口 。 但 是 DOM 标准 在 各 个 浏览 器 中 的 实现 是 不 一 样 的 ， 同 时 
DOM 发 展 也 是 循序 渐进 的 ， 不 断 地 增加 新 的 API。 因 此 ， 各 个 浏览 器 万 至 各 个 版 本 对 
于 DOM 实现 的 也 是 不 一 样 的 。 

]Query 能 够 将 各 个 主流 浏览 器 的 DOM 处 理 方法 统一 起 来 ， 让 开发 人 员 不 必 去 了 
解 各 个 浏览 器 对 于 DOM 处 理 的 细节 与 差异 ， 写 一 次 代码 就 能 在 各 个 浏览 器 中 和 运行， 并 
且 取 得 相同 的 效果 。 本 章 主要 讲解 jQuery 是 如 何 封装 DOM 操作 的 ， 为 用 户 提供 一 致 的 
用 法 。 


【学 习 重 点 】 

bl 了 解 domIManlp() 函数 。 

Pl 了 解 bulldFragment(O) 函数 。 
| 了 人 解 access() 函数 。 

| 就 悉 DOM 操作 接口 。 
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6.1 DOM 操作 引擎 概述 


jQuery 封装 的 DOM 大 致 可 以 分 为 3 大 类 : DOM 操作 、DOM 遍历 和 DOM 事件 ， 本 节 重 点 分 析 DOM 
操作 相关 的 jQuery 的 源码 。 


6.1.1 DOM 操作 设计 原理 


jQuery 的 核心 思想 是 简化 DOM 的 概念 ， 去 除 Element 以 外 其 他 Node 接口 的 概念 ， 重 点 关注 元 素 节点 
Element 的 操作 。 厚 始 的 DOM 操作 包括 Element、Attr、Text、Comment、Document 等 对 象 的 操作 ， 而 在 开 
发 中 基本 上 只 会 处 理 Element。 

Element 相关 的 节点 ， 如 Attr、Text， 都 可 以 以 字符 串 的 形式 操作 ， 所 以 将 DOM 的 操作 简化 为 对 
Element 的 操作 是 可 行 的 。jQuery 使 用 jQuery 对 象 的 形式 将 Element 对 象 进行 封装 ， 把 复杂 的 DOM 定义 简 
化 为 对 jQuery 对 象 ， 使 不 熟悉 DOM 概念 的 用 户 也 可 以 轻松 操作 DOM 对 象 。 

将 Element 对 象 封闭 为 jQuery 对 象 ， 在 jQuery 对 象 的 原型 上 定义 统一 的 接口 。 用 户 不 用 考虑 不 同 浏览 
器 下 Element 处 理 的 差异 ，jQuery 内 部 使 用 策略 模式 或 者 判断 树 ， 将 各 个 主流 浏览 器 的 差异 性 屏蔽 掉 ， 且 
做 好 了 持续 升级 的 准备 ， 以 应 对 浏览 融 不 断 更 新 换代 带 来 新 的 功能 ， 淘 汰 旧 的 功能 后 ， 基 于 jQuery 开发 的 
功能 依旧 可 以 不 受 影 响 地 正 稼 运行 。 

jQuery 对 于 DOM 封装 的 另 一 个 核心 就 是 其 缓存 功能 。jQuery 将 jQuery 对 象 的 变量 ， 如 事件 、 动 画 、 第 
三 方 扩 展 的 属性 ， 都 保存 到 缓存 中 ， 而 缓存 又 保存 在 实际 Element 对 象 中 ， 所 以 当 这 个 Element 对 象 被 再 一 次 
封装 为 jQuery 对 象 时 ， 是 可 以 继承 之 前 的 缓存 ， 进 而 可 以 继续 之 前 的 操作 。 这 个 特性 使 得 用 户 不 用 特意 去 组 
存 jQuery 对 象 的 引用 ， 需 要 的 时 候 可 以 再 一 次 将 Element 对 象 封装 为 jQuery 对 象 ， 而 不 用 担心 两 个 jQuery 对 
象 操作 上 会 产生 数据 上 的 差异 。 即 jQuery 对 象 不 保存 任何 Element 元 素 相关 信息 ， 所 有 的 相关 信息 都 保存 在 
DOM 本 身 中 。 开 发 jQuery 插件 的 时 候 ， 也 要 保证 这 一 原则 ， 和 否则 插件 在 使 用 过 程 中 可 能 会 出 现 问题 。 

此 外 ，jQuery 优化 了 DOM 处 理 过 程 ， 让 DOM 处 理 效率 更 高 ， 因 为 它 封装 了 一 些 DOM 处 理 的 技巧 。 
当然 ，jQuery 在 统一 浏览 器 操作 时 也 会 牺牲 一 部 分 性 能 ， 很 多 受 菲 容 性 限制 的 底层 高 效 的 API 会 被 用 更 耗 
时 ， 但 兼容 性 更 好 的 方法 取代 挤 。 因 为 jQuery 优化 是 技巧 层面 的 技术 ， 不 及 DOM 原生 方法 的 演 染 算法 上 
优化 明显 。 

最 重要 的 是 ，jQuery 对 象 文 持 集合 操作 、 链 式 操 作 ， 这 极 大 地 简化 了 DOM 处 理 ， 使 得 DOM 操作 变 得 
简单 、 优 雅 、 轻 松 、 快 速 ， 可 以 异步 处 理 、 易 于 扩展 。 


6.1.2 DOM 操作 API 组 成 
jQuery 定义 的 DOM 操作 API 很多， 大 致 可 以 分 为 5 大 类 ， 简 单 说 明 如 下 : 
1 DOM 元 素 创 建 
加 jQuery(html,[ownerDoc|) 


加 jQuery.fn.clone([Even|.,deepEven|]) 
MM 1Query.parseHTIML(html,[ownerDoc|) 
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JQuery.fn.html([vallfn|) 

DOM 元 素 插入 
JQuery.fn.append(content|fn) 
]Query.fn.appendTo(content) 
JQuery.fn.prepend(contentlfn) 
J]Query.{n.prependTo(content) 
]Query.fn.replaceWith(content|fn) 
J]Query.fn.after(content|fn) 
J]Query.fn.before(content|fn) 
JQuery.fh.insertAfter(content) 
J]Query.fn.msertBefore(content) 


J]Query.fn.replaceAll(selector) 
]Query.fn.wrap(htmllelelfn) 
JQuery.fn.unwrap() 
JQuery.fn.wrapAll(htmllele) 
J]Query.fn.wrapInner(htmllelelfn) 
DOM 元 素 修 改 
JQuery.{n.attr(namelprolkey,vallfn) 
]Query.fn.removeAttr(name) 
jQuery fn prop(nlplk,vID) 
J]Query.fn.removeProp(name) 
JQuery.fn.html([vallfn|) 
JQuery.fn.text([vallfn|) 
JQuery.fn.val(|vallfnlarr]) 

DOM 元 素 删 除 
jQuery.fh.emptyO 
JQuery.fn.remove([expr]) 
JQuery.fn.detach([expr|) 
JQuery.fn.html([vallfn]) 
J]Query.fn.replaceAll(selector) 
JQuery.fn.wrap(htmllelelfn) 
jQuery fnunwrap0 
JQuery.fn.wrapAll(htmllele) 
JQuery.fn.wrapInner(htmllele|fn) 
DOM 的 ready 
JQuery(callback) 
]Query.holdReady(hold) 

| J]JQuery.ready(hold) 

| 虽然 DOM 操作 的 API 非常 多 ,但 是 很 多 API 都 是 对 底层 API 的 封装 ， 真 正 核心 的 API 不 多 ， 可 以 归 
纳 为 以 下 几 个 ， 包 括 私 有 API。 


办 办 办 外 办 办 办 办 办 办 办 因 售 因 办 因 办 办 办 办 交办 办 办 办 办 办 办 办 办 办 办 办 四 内 
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DOM 元 素 创建 
JQuery.fn.clone([Even|,deepEven||) 
bulldFrasgment 

DOM 元 素 插 入 

domManip 

bulldFragment 

DOM 元 素 修 改 

aCCEeSS 

DOM 元 素 删除 
Query.fn.cleanData( elems ) 
remove( elem, selector, keepData ) 
DOM 的 ready 

J]Query.ready 

在 下 面 小 节 中 会 重点 解析 其 中 几 个 重要 函数 。 


四 有 办 六 办 ET 


6.1.3 创建 元 素 设 计 思 路 


在 创建 元 素 的 时 候 ，DOM 使 用 document.createElement 来 创建 Element， 但 是 更 高 效 的 一 个 方法 是 用 
innerHTML， 将 HTML 文本 转变 为 其 对 应 的 元 素 对 象 。jQuery 困 数 是 对 外 参 露 的 混合 接口 ， 这 些 函 数 使 用 
起 来 非常 方便 。 

JQuery(html) 

jQuery(html,ownerDocument) 

jQuery(html,attributes) 


其 中 通过 HTML 文本 生成 元 素 对 象 工作 就 由 jQuery.parseHTML 来 执行 的 ,但 是 它 还 不 是 最 底层 的 实现 
方法 ， 真正 的 底层 方法 是 buildFragment。 

buildFragment 的 主要 作用 是 创建 一 个 DocumentFragment 对 象 ， 将 不 同 种 类 的 参数 统一 地 封装 为 
DocumentFragment 子 元 率 的 形式 。 之 所 以 要 封装 为 DocumentFragment， 是 为 了 插入 时 效率 更 高 效 ， 因 为 
buildFragment 实际 上 是 为 元 素 节 点 的 搬 人 而 准备 的 。buildFragment 的 流程 如 图 6.1 所 示 。 

设计 思路 说 明 如 下 : 

第 1] 点 ， 该 阴 数 支持 多 和 参数， 如 支持 Node 对 象 、jQuery 对 象 、 普 通 文 本 、HTML 文本 等 4 种 参数 类 型 。 

第 2 点， 对 于 HTML 文本 ， 会 调用 innerHTML 来 生成 对 应 的 Element 对 象 。 

第 3 点， 调用 innerHTML， 通 过 HIML 文本 生成 DOM 对 象 时 ，jQuery 会 对 td、tr、option 等 只 能 在 
特定 父 元 素 上 面 创 建 的 元 素 ， 将 指定 的 父 元 素 套 在 HTML 文本 外 面 ， 确 保 这 些 元 素 是 可 以 创建 的 ， 并 在 
innerHTML 执行 之 后 移 除 多 生成 的 父 元 素 。 

第 4 点 ， 最 后 所 有 元 素 会 被 统一 套 在 一 个 DocumentFragment 中 返回 。 

第 5 点 ， 对 于 封装 到 DocumentFraement 里 面 的 script 标签 ，jQuery 会 判断 它 是 否 已 经 插入 Document 
里 面 。 如 果 是 ， 则 表示 已 经 执行 过 了 ，jQuery 会 调用 内 部 缓存 接口 dataPriv 为 其 添加 标记 ， 下 次 再 插入 
Document 时 不 会 再 执行 这 些 script 标签 。 

以 上 就 是 buildFraement 的 全 部 逻辑 ,buildFragment 生成 的 是 DocumentFraement 对 象 ， 而 jQuery. 
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几 种 不 同形 式 的 参数 


buildFragment 


HTML 字 符 串 


| 
| 思 是 使 用 wrapMap 

| | l 将 tr、td 创建 一 人 

| option 等 只 能 DocumentFragment , 
直接 封装 为 textNode 对 象 创建 的 元 素 补 充 一 个 DIV 

| Jie 再 封装 为 jQuery 对 象 其 父 节 局 


要 


将 DIV 的 
这 个 这 个 对 象 放 innerHTML 将 
将 这 个 对 象 放 罕 这 -1 childNodes 放 入 < 一。 HTML 字符 中 


| 入 nodes 数 组 中 入 nodes 数 组 中 nodes 数 组 中 a 
Ee Node 元 


| 


i 
DocumentFragment ， 


将 整个 nodes 放 人 


| 


| 检查 DocumentFragment 
里 面 的 script 元 素 ， 是 否 已 经 
被 插入 Document 里 面 ， 
如 果 已 经 插入 了 ， 
通过 setGlobalEval 记 录 


将 DocumentFragment 返 回 


图 6.1 buildFragment 的 流程 


parseHTML 却 不 是 。 在 jQuery.parseHTML 中 ，jQuery 把 生成 的 元 素 从 DocumentFragment 对 象 中 取出 来 。 
通过 调用 buildFragmentO 函数 实现 了 整个 通过 HTML 字符 串 创建 元 素 对 象 这 个 复杂 逻辑 的 复 用 。 


本 


闪 提 示 : 关于 buildFragmentO 函数 的 源码 解析 请 参考 6.3 节 内 容 。 


6.1.4 克隆 元 素 设计 思路 


| 
| 
| Element.prototype.cloneNode 是 克隆 元 素 的 DOM API，jQuery 底层 也 使 用 它 。 但 是 ， 无 法 保证 克 降 事 
件 、 缓 存 、 动 画 、 子 元 素 的 内 容 ， 所 以 jQuery 将 这 些 内 容 都 通过 dataPriv 缓存 起 来 ， 这 样 苑 隆 时 可 以 让 新 
。 克隆 好 的 对 象 也 引用 dataPriv 缓存 的 事件 等 系统 对 象 ， 就 完成 了 对 事件 、 缓 存 、 动 画 等 内 容 的 克隆 。 注 意 ， 
这 个 过 程 是 浅 复制 。 

| 对 于 script 元 素 的 克隆 ,与 buildFragment 一 样 ， 判断 它 是 否 已 经 被 插入 Document 里 面 ， 同 样 会 给 已 经 执 
行 过 的 script 元 素 添 加 标记 。 这 样 被 克隆 的 新 script 标签 ， 在 插入 Document 时 会 和 原 标 签 有 相同 的 表现 行为 。 
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在 克隆 时 ， 还 要 注意 早期 的 WebKit 浏览 器 中 是 不 会 克隆 表单 元 素 的 defaultValue 、checked 和 当前 用 户 
输入 的 value。 也 就 是 说 ， 用 户 输 入 的 值 和 表单 元 素 的 默认 值 是 不 会 被 克隆 的 。 | 

jQuery 会 先 实验 性 地 调用 cloneNode 克隆 一 个 input 元素 对 象 ， 通过 新 克隆 的 input 元 素 是 否 存 在 
defaultValue 和 checked 来 判断 当前 浏览 器 是 否 会 存在 不 能 克隆 defaultValue 和 checked 的 问题 。 如 果 有 这 样 
的 问题 ， 就 调用 原 对 象 的 defaultValue 和 checked 履 盖 掉 新 克 降 对 象 的 defaultValue 和 checked。 

有 关 jQuery 的 克隆 操作 的 源码 解析 请 参考 7.4 节 内 容 。 


6.1.5 插入 元 素 设 计 思 路 


jQuery 在 执行 插入 操作 的 时 候 ， 都 会 调用 domManip 做 准备 工作 。jQuery 有 多 种 插入 API, 但 是 无 论 | 
哪个 API 都 要 调用 domManip0 函数 ， 其 设计 流程 如 图 6.2 所 示 。 | 


插入 目标 对 象 ， 待 插入 对 象 ， 回 调 


domManip 


图 6.2 domManip 的 流程 
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到 


设计 思路 说 明 如 下 : 

第 1 点 ， 通 过 调用 buildFragment， 将 所 有 待 插 人 的 参数 统一 封装 为 一 个 DocumentFragment 对 象 ， 因 为 
buildFragmentO 遇 数 不 支持 通过 晴 数 作为 参数 来 创建 元 素 对 象 。 如 果 传 人 参数 是 函数 ， 应 先 调 用 一 次 ， 生 
成 元 素 对 象 后 ， 再 递归 调用 domManip 重新 执行 一 遍 插 入 逻辑 。 

第 2 点 ，jQuery 修改 了 待 插入 元 素 中 script 元 素 的 type 属性 ， 使 其 被 插入 Document 时 不 会 执行 里 面 的 
JavaScript 代码 。 

第 3 点 ， 回 调 真 正 的 插入 函数 时 ， 如 果 插 入 目标 有 多 个 ， 就 将 被 插入 对 象 克 隆 ， 确 保 每 个 插入 目标 对 
象 都 能 获得 竺 插入 对 象 或 者 是 其 克隆 对 象 。 

第 4 点 ， 最 后 阶段 ， 统 一 处 理 script 元 素 ， 将 需要 执行 的 script 通过 调用 globalEval0 函数 执行 。 


党 提示 : 关于 domManip0 函数 的 源码 解析 请 参考 6.2 节 内 容 。 

在 插入 时 ，domManip 对 script 元 素 的 处 理 思 路 : 首先 ， 为 已 经 执行 过 的 script 元 素 添 加 标记 ， 再 修改 
它 的 type 属性 ， 使 其 插入 后 不 会 执行 ; 其 次 ,插入 后 再 将 type 属性 修改 回来 ; 最 后 ,判断 未 标记 的 script 标 
签 是 否 已 经 插入 Document， 如 果 是 则 表示 应 该 运行 ，jQuery 会 通过 globalEval ( DOMEval 的 封装 ) 执行 这 
些 script。DOMEval 的 流程 如 图 6.3 所 示 。 


6.3 DOMEval 的 流程 


os 
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运行 脚本 包括 两 种 方式 : 动态 创建 script 标签 和 使 用 eval。domManip 设计 思路 说 明 如 下 : 

第 1 点 ， 对 于 有 src 属性 的 script 元 素 , jQuery 使 用 $.ajax 模块 执行 。 这 样 会 受到 $.ajaxSettings 配置 的 影响 。 

第 2 点， 对 于 有 src 属性 的 script 元 素 ， 会 根据 跨 域 和 不 器 域 使 用 两 种 不 同 的 运行 方式 ， 这 将 在 jQuery.ajax 
解析 中 再 分 析 。 

第 3 点 ，eval 在 严格 模式 下 和 非 严 格 模式 下 使 用 方法 不 同 : eval 执行 的 时 候 ， 可 以 使 用 不 同 的 作用 域 。 
但 是 在 严格 模式 下 是 不 允许 这 样 调 用 的 ， 所 以 jQuery 使 用 了 创建 script 标签 的 形式 来 实现 javaScript 代码 在 
全 局 作用 域 运行 的 效果 。 


6.1.6 移 除 元 素 设 计 思 路 


在 删除 元 素 时 ，jQuery 要 将 jQuery 对 象 对 一 个 Element 的 所 有 扩展 移 除 。 对 于 jQuery 1x 版 本 来 说 ， 这 个 
过 程 是 必需 的 ， 否 则 会 出 现 内 存 泄露 ; 而 在 jQuery 2x 版 本 中 ， 这 个 过 程 依旧 保留 。 所 以 ，jQuery 的 所 有 扩展 
信息 都 缓存 在 Element 对 象 中 ， 想 要 将 一 个 jQuery 封装 过 的 Element 对 象 还 原 ， 只 要 将 这 些 信息 删除 即 可 。 

此 外 ，jQuery 对 用 户 事 件 使 用 了 addEventListener ( 正 是 attachEvent ) 注册 到 元 素 对 象 上 上 ， 所 以 删除 完 
绥 存 信息 还 要 调用 removeEventListener 解除 jQuery 为 元 素 对 象 增加 的 事件 监听 。 这 一 过 程 将 在 后 面 事件 童 
节 中 进行 解析 ， 这 里 不 再 深究 。 满 足以 上 两 点 ， 就 可 以 去 除 jQuery 对 Element 对 象 的 所 有 扩展 。 

jQuery.cleanData 就 是 实现 这 个 功能 的 ， 而 jQuery 在 所 有 涉及 DOM 移 除 的 操作 时 都 会 调用 这 个 函数 。 


6.2 domManip() 函数 


domManip 是 DOM+Manipulate 的 缩写 ， 表 示 DOM 操作 的 意思 。domManip0 是 jQuery DOM 操作 的 核心 
图 数 ， 对 jQuery 封装 的 DOM 万 点 操作 接口 提供 底层 文 持 ， 如 append、prepend、before、after、replaceWith、 
appendIo、PprependIo 、lnsertBefore 、lnsertAfter 、ITeplaceAll。 


6.2.1 版 本 演变 


domManip0 函数 的 历史 由 来 已 人 和信 ， 从 jQuery 1.0 版 本 开始 便 已 经 存在 ， 一 直到 最 新 的 jQuery 版 本 ， 是 
内 部 核心 的 工具 冰 数 。 

在 jQuery 1.3.0 之 前 版 本 中 ，domManip0 函数 被 挂 在 jQuery 对 象 上 面 (jQuery.fn.domManip )， 用 户 可 
以 通过 $0.domManip0 进行 访问 ; 在 jQuery 3.0 之 后 ，domManip0 是 一 个 私有 函数 ， 外 部 无 权 访 问 。 

在 jQuery 13 一 jQuery 1.9 中 ，domManip0 困 数 仅 提 供 3 个 参数 ; 在 jQuery 2.1.2 之 前 ，domManip0 困 数 有 
4 个 参数 ; 在 jQuery 2x 中 ，domManip0 哺 数 只 有 2 个 参数 ; 在 jQuery 3X 中 ，domManip0 因数 提供 了 4 个 参数 。 

在 jQuery 3.1.9 之 前 ，jQuery 对象 的 replaceWith0 方法 不 使 用 domManip0 哨 数 ， 之 后 统一 作为 底层 处 
理 闵 数 使 用 。 


针对 节点 操作 ，DOM 标准 提供 的 接口 有 限 ， 简 单 说 明 如 下 : 
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appendChild0: 通过 把 一 个 节点 增加 到 当前 节点 的 childNodes[] 组 ， 给 文档 树 增 加 节点 。 
cloneNode0: 复制 当前 节点 ， 或 者 复制 当前 节点 以 及 它 的 所 有 子孙 节点 。 

hasChildNodesO: 判断 当前 节点 是 否 拥有 子 节点 ， 如 果 拥 有 则 返回 true。 

insertBefore0 : 在 文档 树 中 插入 一 个 节点 位置 在 当前 节点 内 指定 子 节 点 之 前 。 如 果 该 节点 已 经 存 


在 ， 则 删除 之 后 再 插入 指定 位 置 。 
removeChild0: 从 文档 树 中 删除 并 返回 指定 的 子 节 点 。 
replaceChild0: 从 文档 树 中 删除 并 返回 指定 的 子 节 点 ， 使 用 另 一 个 节点 蔡 换 它 。 


以 上 接口 都 有 一 个 共同 特性 : 传人 的 参数 只 能 是 一 个 节点 类 型 ， 如 果 传 人 字符 串 、 国 数 或 者 其 他 内 容 ， 
将 会 抛 出 异常。 

所 以 ， 针 对 所 有 DOM 操作 接口 ，jQuery 抽象 出 一 种 参数 处 理 方 案 ， 这 就 是 domManip0 图 数 存 在 的 意 
义 。jQuery 内 部 定义 了 很 多 这 样 的 图 数 ， 如 属性 操作 中 的 access(。 


6.2.3 domManip 主要 功能 


在 DOM 操作 中 ， 大 家 常用 innerHTML 方法 插入 HTML 字符 串 ， 实 际 上 还 有 3 个 非 标准 的 方法 可 以 更 


精准 地 完成 相关 操作 。 
加 ”insertAdjacentElement: 在 指定 的 位 置 插入 DOM 元 素 。 
回 insertAdjacentHTMIL: 在 指定 的 位 置 插入 HTML 字符 串 。 
回 insertAdjacentText: 在 指定 的 位 置 插入 文本 。 


element.msertAdjacentElement(position, element): 
element.insertAdjacentHTIML(position, HTMLString): 
element.nsertAdjacentText(position, text): 


MI 


和 


学 区 办 


position: 定义 位 置 ， 取 值 为 4 个 字符 型 常量 值 ， 具 体 说 明 如 下 。 
>  'beforebegin': 在 元 素 前 面 。 

> afterbegin': 在 元 素 内 第 一 个 子 元 素 前 面 。 

> "beforeend': 在 元 素 内 最 后 一 个 子 元 素 后 面 。 

> “'afterend': 在 元 素 后 面 。 

element: 表示 要 插入 的 元 素 。 

HTMLString: 表示 要 插入 的 HTML 代码 字符 串 。 

text: 表示 文本 节点 或 文本 字符 串 。 


览 乾 支持 状态 : Chrome、Firefox 48+、IE 8+、QOpera、Safari1， 可 以 看 到 目前 主流 浏览 兹 都 支持 这 3 
a 


位 置 参数 position 的 可 视 化 展示 如 下 : 
<!-- betorebegln --> 


<p> 


<!-- afterbegin --> 


foo 


<=|I-- beforeend --> 
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</p> 

<!-- afterend --> 

这 些 功 能 在 jQuery 中 都 有 对 应 的 接口 。 具 体 说 明 如 下 : 

加 ”beforeBegin: 与 之 对 应 的 是 ]jQuery0.before()。 

串 ”afterBegin: 与 之 对 应 的 是 jQueryO.prependO。 

四 ”beforeEnd: 与 之 对 应 的 是 JQueryO.appendO。 

四 afterEnd: 与 之 对 应 的 是 ]Query0.after()。 

实现 类 似 的 接口 并 不 复业 ,在 jQuery 中 通过 domManip0 图 数 可 以 快速 封装 。 
domManip0 函数 的 主要 功能 是 实现 DOM 的 插入 和 替换 ， 主 要 包括 5 个 服务 。 
内 部 后 插入 : append。 

名 ”内 部 前 插入 : prepend。 

加 ”外 部 前 插入 : before。 
四 
四 


四 


外 部 后 插入 : after。 
替换 元 素 : replaceWith。 提 示 ， 在 1.9.x 之 前 的 版 本 没有 使 用 domManipO 函数 。 
根据 位 置 不 同 提 供 了 4 个 公开 方法 : append0 、prependO0 、before0 和 after0， 此 外 还 有 replaceWithO 方 | 
法 。 简 单 地 说 ，domManip0 函数 仅 做 了 两 件 事 。 | 
四“ 先 完成 DOM 节点 添加 。 | 
加 ”如果 添 加 的 DOM 节点 内 有 <script> 标签 ， 需 要 额外 处 理 。 对 于 可 执行 的 <script>， 通 过 type 属性 
判断 ， 则 执行 其 内 的 脚本 代码 ， 其 他 情况 则 不 执行 。 | 
另外 5 个 方法 : appendTo()、prependTo()、insertBefore()、insertAfter() 和 replaceAll0， 通 过 each 迭代 器 
快速 生成 ,它们 之 间 的 关系 是 操作 与 被 操作 之 间 的 位 置 关 系 ， 即 颠倒 调用 位 置 。 源 但 如 下 : 
jQueryeach({ /为 下 面 项 目 绑 定 功能 函数 
appendIo: "append", 
prependTo: "prepend". 
nsertBetore: "before", 
InsertAfter: "after", 
replaceAll: "replace With" 
+, fnction (name., orieinal) { 
Query.fn[name| = function (selector) { 


Var elems. 
ret = [], /操作 集合 
insert = jQuery(selector), // 插 入 DOM 集合 
last = insert.length - 1, / 最 后 一 个 
= 


for (:1<— last; I++) { 
elems = 1———= last ? this : this.clone(true): 
jQuery(insert[iD)[originall(elems): 1/ 使 用 原 方法 ， 反 向 操作 
// 文 持 : 仅 Android < 4.0， 仅 限 PhantomJS 1 
/getO0， 因 为 在 旧版 本 的 WebKit 中 ，push.apply(_, arraylike) 会 抛 出 异常 
push.apply(ret, elems.get()):; 
} 
return this.pushStack(ret): / 转换 为 jQuery 对 象 ， 并 返回 


月 : 
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【示例 】 使 用 append0 方法 在 段落 文本 尾部 添加 一 个 标题 文本 ， 效 果 如 图 6.4 所 示 。 


<script> 
$(function (O { 


到 $("p").append("<h1> 标题 文本 </h1>"); 
和 }) 
Note </script> 
| <p style="border:solid 1px red"> 段落 文本 </p> 


| 证 
| 
| = | CUsersvB\Ciocurmentsy ~ 忆 全 CnwUsa 


且说 立 本 


标题 文本 


图 6.4 附加 标题 文本 


如 条 使 用 appendTo0 方法 实现 相同 的 效果 ， 只 需 颠 倒 一 下 位 置 关 系 即 可 ， 代 码 如 下 : 


$(function ( { 
| $("<hl> 标题 文本 </h1>").appendTo($("p")): 
}) 


下 面 来 看 下 append() 、prepend() 、before()、afterO 四 个 方法 的 源码 ， 这 些 源 码 通 过 jQuery.fhn.extend0 方 
法 直接 挂 在 jQuery 原型 对 象 上 面 。 


JQuery.fn.extend( { 

| append: function () { 

| return domManip(this, areuments, function (elem) + 

| if (this.nodeType =——= 1 || this.nodelype —= 11 || this.nodeType —= 0) 1{ 
var target = manipulation Target(this, elem):; 
target.appendChild(elem): 


| }); 
| 
prepend: function () { 
return domManip(this, areuments, function (elem) + 
1f (this.nodeType =—= 1 || this.nodeType —= 11 || this.nodelType —= 9) { 
var target = manipulation Target(this, elem): 
| target.insertBefore(elem, target.firstChild): 


| BE 

上 

before: function ( { 

| return domManip(this, areuments, function (elem) { 

1f (this.parentNode) { 

| this.parentNode.msertBetore(elem., thls): 
} 

})); 


* 156 。 


第 0O 章 解析 DDOM 模块 


after function () 
return domManip(this, areuments, function (elem) { 
1{ (this.parentNode) { 
this.parentNode.nsertBefore(elem, this.nextSibling); 
} 
)); 


} 


通过 比较 可 以 看 到 ， 这 些 方法 都 是 百 接 返 回 domManip0 国 数 的 调用 ， 通 过 第 3 个 参数 ( 回调 函数 ) 来 
设计 不 同 的 功能 。 在 这 里 ，domManip0 函数 主要 对 接口 的 参数 进行 处 理 ， 以 实现 快速 、 标 准 化 的 操作 流程 。 


6.2.4 ”源码 解析 


domManip0 铺 数 依赖 一 个 重要 卫 数 一 一 buildFraement0 〇 站 ， 通 过 它 构建 文档 片段 ， 为 DOM 插入 提高 性 能 。 
domManip0 困 数 对 script 元 素 做 了 如 下 特殊 处 理 。 
script 无 type 属性 ， 默 认 会 执行 其 内 JavaScript 脚本 。 
script 的 type="text/javascript" 或 type="text/ecmascript"， 会 执行 其 内 的 JavaScript 脚本 。 
script 如 果 有 src 属性 ， 会 执行 $. evalUrl， 请 求 远 程 的 JavaScript 脚本 文件 并 执行 。 
其 他 情况 下 不 会 执行 JavaScript 脚本 ， 有 时 会 用 script 来 设计 HTML 模板 ， 如 underscore.js，type= 
"text/template" 或 type="text/plain" 等 ， 其 中 的 Javascript 脚本 都 不 会 被 执行 。 
domManipO 图 数 内 部 主要 依 不 buildFragmentO、restoreScriptO 、disableScriptO 、ijQuery. evalUrl0、 
DOMEval0 函数 ， 而 restoreScriptO 、jQuery，evalUrl0 困 数 也 仅 在 domManip 困 数 中 使 用 。 
domManip0 陈 数 源码 解析 如 下 : 
/DOM 节点 操作 底层 函数 ， 实 现 DOM 的 插入 和 替换 
// 参数 说 明 : 
//collection: 被 插入 的 DOM 元 素 集合 ， 如 jQuery 对 象 
/args: 待 插入 的 DOM 元 素 或 HTML 代码 等 参数 
//callback: 回调 函数 ,执行 格 式 为 callback.call( 目标 元 素 , 待 插入 文档 片段 /单个 DOM 元 素 ) 
//ignored: 备用 标识 参量 ， 是 否 忽 略 回调 
function domManip(collection., args. callback, 1enored) { 
1/ 展开 艇 套数 组 ， 把 多 维 数组 转换 为 一 维 数组 
args = concat.apply([], args): 


和 多 多 的 


// 局 部 变量 
Var fraement. first, scripts, hasScrlpts. node. doc. 
1 三 心 
1= collection.length， / 操作 元 素 个 数 


iNoClone =1- 1,// 是 否 为 克隆 节点 ， 如 果 当 前 jQuery 对 象 是 一 个 合集 对 象 ， 那 么 通过 文档 片段 
1/ 构建 出 来 的 DOM， 只 能 是 副本 ， 克 隆 到 每 个 合集 对 和 象 中 
value = args[0].// 第 一 个 元 素 ， 后 边 只 针对 args[0] 进行 检测 ， 意 味 着 args 中 的 元 素 必须 是 同一 类 型 
isFunction = jQuery.isFunction(value): /判断 是 否 为 困 数 
/在 WebKit 中 无 法 克隆 包含 已 检查 的 节点 片段 
// 如 来 是 回调 函数 ,或 者 跳 过 WebKit checked 属性 
1f (1sFunction || 
(> 1 &é& typeot value =—— "strine" && 
Isupport.checkClone &é& rechecked .test(value))) { 
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retum collection.each(function (index) { 
Var self = collection.eq(Index): 
1f (1isFunction) { 
args|0| = value.call(this, index., self.html()): 
} 
domManip(self, args, callback., ienored); 


1); 
} 
/将 HIML 转化 成 DOM 
是 /如果 jQuery 对 象 不 为 空 
/ 创建 文档 片段 
fraement = bulldFragment(args, collection[0|.ownerDocument, false, collection, 1gnored): 
first = fragment.firstChild: / 获取 文档 片段 第 一 个 子 元 素 
if (fragment.childNodes.length =— 1) { / 如 果 仅 有 一 个 节点 ， 则 直接 使 用 它 
fragment = first: 
} 
/要 求 必须 有 新 的 内 容 ， 或 忽略 对 元 素 的 回调 
if (first | ignored) { /如 果 传 递 了 有 效 参 数 ， 或 者 忽略 功能 绑 定 
/处 理 script 标签 


scripts = jQuery.map(getAll(fragment, "script"), disableScripD:W 禁用 
hasScripts = scripts.leneth: 
/ 使 用 最 后 一 个 项 目 ， 而 不 是 第 一 个 项 目的 原始 片段 ， 因 为 在 某 些 情况 下 ， 它 可 能 会 被 错误 清空 (#8070) 


for (Ci<1iHH{ / 迁 代 操作 jQuery 集合 
node = 位 asment: /引用 文档 片段 
if (i!— iNoClone) { 1/ 克隆 节点 


node = jQuery clone(node, true, true);// 执行 克隆 操作 

/ 保留 对 克隆 脚本 的 引用 ， 以 便 以 后 恢复 

if (hasScripts) { 
/ 支持: 仅 Android 4.0-， 仅 限 PhantomJs 1 
/在 旧版 本 的 WebKit 上 ，push.apply( , arraylike) 将 抛 出 异常 
J]Query.merege(scripts, getAll(node, "script")): 

} 


} 
1/ 调用 回调 函数 ,执行 DOM 操作 
callback.call(collection|1|. node. 1): 


} 

/ 处 理 script 标签 

if (hasScripts) { 
doc = scripts[scripts.length - 1].ownerDocument 获取 根 市 点 
jQuery.map(scripts, restoreScript); /重新 启用 脚本 


// 在 首次 插入 文档 时 评估 可 执行 脚本 
tor (1= 0:;1< hasSscripts; 1++) + 
node = scripts[il: /获取 当前 script 元 素 
站 (rscriptType.test(node.type |"") && /检测 script 的 type 类 型 
1dataPriv.access(node, "globalEval") &¢& 
jQuery.contains(doc, node)) { /是 否 包含 在 文档 中 
if (node.src) { 1/ 如 果 存 在 远程 脚本 
1/ 可 选 的 AJAX 依赖 ， 但 是 如 果 不 存 在 ， 不 会 运行 脚本 
1 (JQuery. evalUrl) { 
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jQuery. evalUrlaode.src): V 执行 远程 脚本 


} 

} else { / 执行 脚本 
DOMEval(node.textContent.replace(rcleanScript, ""), doc)j: 

} 

} 
} 
} 
} 
return collection: 1/ 返回 处 理 后 的 jQuery 集合 


在 完全 理解 domManip0 胃 数 的 内 部 结构 和 还 辑 之 前 ， 谈 者 应 该 知道 jQuery 对 DOM 点 操作 封 交 了 一 
系列 的 接口 。 这 些 接口 可 以 接收 HIML 字符 串 、DOM 元 素 、 元 素数 组 ， 或 jQuery 对 象 ， 用 来 插 在 集合 中 
每 个 匹配 元 素 的 不 同位 置 。 例 如 : 

名 ”HTML 结构 

$(".inner’).after(<p>Test</p>"); 


回 jQuery 对 象 
$('.container").after($('h2")); 


回 ”回调 函数 
一 个 返回 HTML 字符 串 、DOM 元 素 、jQuery 对 象 的 图 数 。 回 调 函 数 接收 元 素 在 集合 中 的 索引 位 置 作 
为 参数 。 在 回调 函数 体内 ，this 指向 元 素 集 合 中 的 当前 元 素 。 
$('p').atter(function() ! 
return ‘<div>" + this.className 十 一 /dv 
)); 


清楚 了 这 些 接 口 的 调用 ， 就 能 够 更 好 地 理解 domManip0 的 逻辑 设计 ， 实 际 上 它 主要 用 来 处 理 不 同类 型 
的 参数 ， 以 实现 DOM 插入 和 替换 操作 。 

针对 DOM 市 点 的 操作 有 以 下 几 个 重点 的 细节 。 

回 ”保证 最 终 操作 的 永远 是 DOM 元 素 ， 浏览 紫 只 认识 前 面 的 几 个 接口 ， 所 以 如 果 传 递 的 是 字符 串 或 

者 其 他 类 型 的 参数 ， 需 要 借用 domManip0 或 其 他 工具 进行 转换 和 处 理 。 

加 针对 DOM 节点 的 大 量 操作 ， 要 引入 文档 片段 做 优化 ， 以 提升 执行 效率 。 

具体 来 说 ，domManip0 做 了 以 下 两 部 分 工作 。 

加 ”将 参数 args 转换 为 DOM 元 素 ， 并 放 在 一 个 文档 片段 中 ， 调 用 jQuery.buildFragment( 实现 。 

加 ”执行 参数 callback， 将 DOM 元 素 作为 参数 传人 , 由 callback 执行 实际 的 插入 操作 。 

第 1 步 ， 分 析 局 部 变量 初始 化 代码 行 。scripts 变量 在 jQuerybuildFrasgmentO 中 会 用 到 ， 脚 本 的 执行 
在 domManip0 函数 的 最 后 一 行 。 如 有 打 标 签名 为 script， 且 未 指定 type 或 type 为 text/javascript， 即 支持 插入 
script 标签 并 执行 ; 外 部 脚本 将 通过 jQuery.ajax 以 同步 阻塞 的 方式 请 求 ， 然 后 执行 ， 内 联 脚本 通过 DOMEval0 
执行 。 

第 2 步 ， 规 避 WebKit checked 属性 。 看 下 面 这 段 代码 : 
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1f (isFunction || 
(1= 1 && typeotf value =—— "strine" && 
!support.checkClone && rchecked.test(value))) { 
retum collection.each(function (Index) { 
Var self = collection.eq(Index):; 
1f (1sFunction) { 
args[0] = value.call(this, index. self.html()): 


上 
domManip(self, args, callback., ienored): 


I 
} 
在 WebKit 中 ,不 能 克隆 包含 了 已 选中 复 选 框 的 文档 片段 。 在 站 代码 块 中 ， 需 要 满足 的 条 件 为 “不 能 正 
确 复制 选中 状态 + value 是 字符 串 + 已 选中 的 多 选 / 单 选 按钮 ”。 
Chrome 浏览 器 和 Safari 浏览 器 用 的 都 是 WebKit 引擎 ， 在 Chrome 浏览 器 下 jQuery.support.checkClone 
是 ttue， 那 么 问题 就 在 Safari 浏览 右 中 ; 在 each 的 回调 函数 中 再 次 调用 domManip()。 
第 3 步 ， 支 持 参 数 为 图 数 。 如 有 果 value 是 隐 数 ， 则 执行 函数 ， 并 用 返回 的 结果 再 次 调用 domManip0; 用 
value 的 返回 值 替 换 args[0]， 最 后 用 修正 过 的 args 迭代 调用 domManipO)。 
1f (1sFunction) { 
ares[0| = value.call(this, index., self.html()): 
} 


第 4 步 ， 在 站 (1) { } 条 件 语句 段 ， 转换 HIML 代码 为 DOM 元 素 。 
首先 ， 调 用 jQuery.buildFragment 创建 一 个 包含 args 的 文档 片段 ，jQuery.buildFragmentO 用 到 了 缓存 ， 
重复 的 创建 会 被 缓存 下 来 ，jQuery.buildFraementO 返回 的 结构 是 {fragment: fraement, cacheable: cacheable }。 


frasgment = buldFraement(ares, collection[0|.ownerDocument, false, collection, lgnored): 


然后 ， 获 取 第 一 个 子 元 素 fst， 如 果 只 有 一 个 子 元 素 ， 那 么 可 以 省 略 文 档 片 段 ， 这 么 做 可 以 更 快 地 插 
入 元 素 。 


first = fragment.firstChild: 1/ 获取 文档 片段 第 一 个 子 元 素 

站 (fragment.childNodes.length 一 1){ ”// 如 果 仅 有 一 个 节点 ， 则 直接 使 用 它 
fraement = first: 

} 


到 这 里 准备 工作 完成 了 ， 即 把 args 转换 为 DOM 元 素 ， 准 确 地 说 是 创建 包含 args 的 文档 片段 ， 后 边 开 
始 执 行 回调 隐 数 ， 开 始 实 际 地 插入 操作 。 

第 5 步 ， 在 1f (first | ignored) f} 条 件 语句 段 ， 执 行 回调 消 数 插入 DOM 元 素 。 如 果 成 功 创建 了 DOM 元 

第 6 步 ， 使 用 for Ci<L i++H 人 f 循环 语句 段 遍 历 当前 jQuery 对 象 中 的 匹配 元 素 。 

第 7 步 ， 执行 回调 函数 callback0 ， 格 式 为 callback.call( 目标 元 素 上 下 文 , 待 插 入 文档 片段 /单个 DOM 
元 素 )。 

callback.call(collectlon|1l. node, 1): 


第 8 步 ， 殉 隆 文档 片段 /单个 DOM 元 闲 ， 在 遍历 到 最 后 一 个 元 素 之 前 一 直 对 fragment 进行 克隆 ， 最 后 
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一 个 元 素 使 用 创建 的 fagment。 
让 (i ! 一 INoClone) {// 克隆 节点 
node = JQuery.clone(node, true, true); 
! 


第 9 步 ， 在 站 (hasScripts) {} 条 件 语句 段 执行 脚本 元 素 。 如 果 脚 本 数组 scripts 的 长 度 大 于 0， 则 执行 其 
中 的 脚本 。 

if (rscriptType.test(node.type 1""){} 条 件 语句 段 负 责 执行 script 元 素 ， 如 果 是 外 部 脚本 ， 即 通过 src 引入 ， 
用 jQuery.ajax 同步 请 求 src 指定 的 地 址 并 自动 执行 ; 如 果 是 内 部 脚本 ， 即 写 在 script 标签 内 ， 用 DOMEval0 
执行 。 


6.3” buildFraement() 有 孟 数 


在 jQuery 中 ，DOM 操作 需要 调用 两 个 核心 消 数 ,分别 是 domManip0 和 buildFragment0。buildFragmentO 
接收 domManip0 传人 的 HTML 人 代码， 创建 一 个 文档 片段 DocumentFragment， 在 这 个 文档 片段 上 将 HIML 
代码 转换 为 DOM 元 素 。buildFraementO 的 实现 有 两 个 方面 值得 借鉴 。 

如 果 要 插入 多 个 DOM 元 素 ， 可 以 先 将 这 些 DOM 元 素 插 和 人 一 个 文档 片段 ， 然 后 将 文档 片段 插入 文档 中 ， 


这 时 插 人 的 不 是 文档 片段 ， 而 是 它 的 子孙 节点 。 相 比 于 逐步 插入 DOM 元 素 ， 使 用 文档 片段 可 以 获得 2 一 3 
倍 的 性 能 提升 。 


如 果 将 重复 的 HIML 代码 转换 为 DOM 元 素 ， 可 以 将 转换 后 的 DOM 元 素 缓存 起 来 ， 下 次 〈 实 际 是 第 3 
次 ) 转换 同样 的 HTML 代码 时 ， 可 以 直接 将 缓存 的 DOM 元 素 克 降 返 回 。 


6.3.1 文档 卢 段 万 点 


DocumentFragment 是 一 个 轻 量 级 的 文档 对 象 ， 能 够 提取 部 分 文档 的 树 或 创建 一 个 新 的 文档 片段 。 
DocumentFragment 类 型 节点 在 文档 树 中 没有 对 应 的 标记 。DOM 允许 用 户 使 用 JavaScript 操作 文档 片段 中 的 
节点 ， 但 不 会 把 文档 片段 添加 到 文档 树 中 显示 出 来 ， 和 避免 浏览 副 演 染 和 占用 资源 ， 起 到 文档 缓存 的 作用 。 

DocumentFragmert 节点 具有 下 列 特征 : 
nodeType 值 为 11。 
nodeName 值 为 "#document-fraement"。 
nodeValue 值 为 null。 
parentNode 值 为 null。 

子 方 点 可 以 是 Element、ProcessingInstruction、Comment、Text、CDATASection 或 EntityReference。 
文档 片段 作用 : 将 文档 片段 作为 节点 “仓库 ”来 使 用 ， 保 存 将 来 可 能 会 添加 到 文档 中 的 节点 。 
创建 文档 片段 的 方法 如 下 : 


var fraement = document.createDocumentFraement(): 


时 国人 角 鸭 的 


< 们 注意 : 如 果 将 文档 树 中 的 节点 添加 到 文档 片段 中 ， 就 会 从 文档 树 中 移 除 该 节点 ， 在 浏览 器 中 也 不 会 再 
看 到 该 节点。 添加 到 文档 方 段 中 的 新 下 点 同样 也 不 属于 文档 树 。 
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zmy 以 入 门 到 精通 ( 币 课 精 编 且 ) 


使 用 appendChild0 或 insertBefore0 方法 可 以 将 文档 片段 添加 到 文档 树 中 。 在 将 文档 片段 作为 参数 传递 
给 这 两 个 方法 时 ， 实 际 上 只 会 将 文档 片段 的 所 有 节点 添加 到 相应 位 置 上 ， 文 档 片段 本 身 永远 不 会 成 为 文档 
树 的 一 部 分 ， 可 以 把 文档 片段 视 为 一 个 节点 的 临时 容器 。 

【示例 】 每 次 使 用 JavaScript 操作 DOM 都 会 改变 页 面 呈 现 ， 并 触发 整个 页 面 重新 演 染 ， 从 而 消耗 系统 
资源 。 为 解决 这 个 问题 ， 可 以 先 创建 一 个 文档 片段 ， 把 所 有 的 新 节点 附加 到 文档 片段 上 ， 最 后 再 把 文档 片 
段 一 次 性 添加 到 文档 中 ,减少 页 面 重 绘 的 次 数 。 

<input type="button" value=" 添加 项 目 " onclick="addItems()"> 

<U] 1d="myList"></ul> 

<script> 

function addItems(){ 

Var fragment = document.createDocumentFragment(); 

var ul = document.getElementByld("myList"): 

var li = null: 

for (Var 1—=0; 1 < 12; H+H){ 

1 = document.createElement("]1"): 
li.appendChild(document.createTextNode(" 项 目 " + (+lD7: 


fragment.appendChild(1): 
} 
ul.appendChild(fraement): 
} 
</script> 


上 面 代码 准备 为 ul 元素 添加 12 个 列表 项 。 如 果 了 逐个 添加 列表 项 ， 将 会 导致 浏览 絮 反 复 演 染 页 面 。 为 避 
免 这 个 问题 ， 可 以 使 用 一 个 文档 片段 来 保存 创建 的 列表 项 ， 然 后 一 次 性 将 它们 添加 到 文档 中 ， 这 样 能 够 提 
升 系统 的 执行 效率 。 


6.3.2 源码 解析 


buildFragmentO 函数 源码 如 下 


var rhtml = /<|&#?\w+:/:W/HTML 标签 正则 表达 式 
/创建 文档 片段 
// 参数 说 明 如 下 : 
//elems: 元 素 集合 
//context: 上 下 文 环 境 
//scripts: scripts 标签 集 
//selection: 跳 过 的 标签 集合 
//ignored: 是 否 忽略 selection 中 的 元 素 
function builldFraement(elems, context, scripts, selection, 1enored) { 
Var elem, tmp, tag, wrap, contains, ], 
fragment = context.createDocumentFraement(),// 创建 文档 片段 
nodes = | |， 
i=0, 
] = elems.lenegth:; 
for (:i<Lith) { / 达 代 元 素 集合 
elem = elems|1|; 


if (elem || elem — 0) { 1/ 检测 是 否 存 在 ， 包 括 0 
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/ 直接 添加 节点 
if Query.type(elem) 一 一 "object ) { 
/ 合并 到 节点 集中 


// 如 果 是 jQuery 对 象 


jQuery.merge(nodes, elem.nodeType ? [elem] : elem):// 如 果 是 元 素 ， 则 装 人 数组 ， 再 合并 到 nodes 集 


/将 非 字符 串 转换 为 文本 节点 

+ else 1f (!'rhtml.test(elem)) { 
nodes.push(context.create TextNode(elem)): 
/将 HTML 字符 串 转换 成 DOM 节点 

} else { 


1/ 创建 文本 节点 ， 然 后 推 入 节点 集合 中 


tmp = tmp || fraement.appendChild(context.createElement("div")):// 创建 根 节 点 div， 然 后 添加 到 文 


1/ 反 序列 化 一 个 标准 表示 


1// 档 片段 中 


tag = (rtagName.exec(elem) || ["", ""])[1l1.toLowerCase0: 获取 标签 


wrap = wrapMap|tag | | wrapMap. detault: 


/获取 包含 框 容 表 


tmp.innerHTML = wrap[1] 二 jQuery.htmlPrefilter(elem) + wrap[2]:// 构建 节点 片段 ， 外 面包 庄 包 含 框 容 丹 


// 通过 包装 下 载 到 正确 的 内 容 
j= wrap[0]: 
while (J--) { 

tmp = tmp.lastChild: 


} 

/ 合并 节操 

J]JQuery.merge(nodes, tmp.childNodes): 

// 记 住 最 顶层 容 带 

tmp = fragment.firstChild: 

/ 确保 创建 的 节点 是 孤立 的 ( # 12392 ) 
tmp.textContent = ""; 


} 
} 
} 
fraement.textContent = "": 
1= 人 O: 


while ((elem = nodes[1+H+|)) 4 
// 跳 过 selection 中 的 元 碌 (trac-4087 ) 
1{ (selection && JQuery.inAIrray(elem, selection) > -1) 1{ 
lf (1enored) { 
1gnored.push(elem); 
} 


continue: 


} 
/判断 当前 元 素 是 否 包含 在 文档 根 节 点 下 


contalms = JQuery.contans(elem.ownerDocument, elem): 


/把 当前 元 素 追 加 到 片段 
tmp = getAll(fraement.appendChild(elem), "script"); 
1/ 保留 脚本 评估 历史 
1f (contams) { 
setGlobalEval(tmp): 
} 
1{ (scripts) 4 
j= 
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1/ 迭代 外 包含 框 ， 获 取 节 点 片段 的 根 标签 


// 清除 片段 
/迭代 所 有 转换 的 DOM 节点 


由 如 果 参 数 ignored 为 tue， 则 忽略 指定 元 素 
// 把 元 素 推 入 ignored 


// 在 元 素 中 查找 所 有 script 标签 
// 如 果 包 含 在 文档 根 节点 下 ， 则 标记 保存 


/捕获 可 执行 文件 


zooy 入 和 门 到 精通 ( 柚 课 精 编 县 ) 


while ((elem = tmp[j++])) { // 兴 代 所 有 script 标签 
if (rscriptType.test(elem.type 上 "")) {// 处 理 script 标签 
scripts.push(elem): 
} 
} 
3 
} 
return fragment: /返回 处 理 后 的 DOM 卢 段 


} 
使 用 文档 片段 ， 前 先 要 创建 文档 片段 ， 代 码 如 下 : 


fragment = context.createDocumentFraement(), 


然后 ， 把 所 有 需要 处 理 的 DOM 节点 appendChild 放 进 去 。 
buildFragmentO 对 于 文档 片段 的 创建 步骤 如 下 : 
第 1 步 ， 收 集 节 点 元 素 。buildFragment0 需要 针对 传人 的 elems 参数 分 解 为 三 部 分 操作 ， 引 入 一 个 nodes 


变量 缓存 起 来 。 


回 jQuery 对 象 


if JQuery.type(elem) 一 二 "object ) { 
jQuery.merge(nodes, elem nodeType ? [elem] : elem): 
} 


名 ”文本 


else 1f (!rhtml.test(elem)) { 
nodes.push(context.create [extNode(elem)): 
} 


回 ”HTML 字符 串 
将 HIML 代码 赋值 给 一 个 DIV 元 素 的 imnerHTML 属性 ， 然 后 取 DIV 元 素 的 子 元 素 ， 即 可 得 到 转换 后 


的 DOM 元 素 。 
else { 
tmp = tmp || fragment.appendChild(context.createElement("div")):; // 创建 根 节点 div， 然 后 添加 到 文档 片段 中 
tag = (rtagName.exec(elem) | ["", ""|)[1].toLowerCase(); / 获取 标签 
wrap = wrapMap[tag| | wrapMap. default: 1/ 获取 包含 框 容器 
tmp.innerHTML = wrap[1] + jQuery.htmlPrefilter(elem) + wrap[2]:/ 构建 节点 片段 ， 外 面包 庄 包 含 框 容器 
]=wWrap|0|: 
while (j--) { 1/ 迭代 外 包含 框 ， 获 取 节 点 片段 的 根 标签 


tmp = tmp.lastChild: 
} 
J]Query.merge(nodes. tmp.childNodes); 
tmp = fraement.firstChild: 
tmp.textContent 一 : 
} 


第 2 步 ， 创建 一 个 临时 的 tmp 元 素 ( div )， 这 样 调用 innerHIMLO 方法 ， 用 来 存储 创建 的 节点 的 内 容 ， 


fragment 本 身 只 是 起 到 一 个 容器 的 作用 。 
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第 3 步 ，jQuery 引入 一 个 wrapMap， 一 个 反 序列 化 表示 。 
jQuery 创建 元 素 类 型 可 以 是 任意 的 ， 可 以 是 a、scrmpit、tr、 也 、option 等 。 


inner.after(<tr></tr>"); 
inner.atter('<div></div>"): 


但 是 ， 并 不 是 所 有 元 素 的 创建 都 是 标准 的 ， 在 不 同 浏览 器 下 还 是 有 区 别 的 ， 如 表格 ， 在 table 中 插入 一 
行 一 列 0 
var table = document.getElementsByTaeName('table")[0]: 
var tr = document.createElement('tr'); 
var td = document.createElement('td'): 
var txt = document.create TextNode('haha'): 
td.appendChild(txt): 


tr.appendChild(td): 
table.appendChild(tr): 


上 面 代 码 在 正 6 中 是 不 能 成 功 执行 的 ， 在 正 8 以 上 的 浏览 船 都 是 可 以 的 。 正 6 失败 的 原因 就 是 正 6 认 
为 tt 标签 必须 在 tbody 下 面 。 也 就 是 说 ， 代 码 写 成 下 面 形式 ， 所 有 浏览 器 才能 够 兼容 。 
var table = document.getElementsByTagName('table")[0]: 
var tbody = document.createElement('tbody’"): 
var tr = document.createElement( tr'): 
var td = document.createElement('td'"): 
var txt = document.create TextNode('haha'): 
td.appendChild(txt): 


tr.appendChild(td): 
tbody.appendChild(tr): 


table.appendChild(tbody) 

第 4 步 ， 如 果 使 用 jQuery 插入 一 个 tt 标签 ， 就 需要 在 内 部 做 以 下 处 理工 作 。 

mner.after(<tr><t>"); 

wrapMap 就 是 用 来 做 适 配 的 : 

tmp.innerHTML = wrap[ 1 | + elem.replace( rxhtmlTag, "<$1></$2>" ) + wrap|[ 2 ]: 

拼写 出 来 的 规则 束 古 : 

mnerHTML: "<table><tbody><tr></t><tr></t></tbody></table>" | 

第 5 步 ， 因 为 wrapMap 容器 打破 了 原来 的 排列 组 合 ， 所 以 人 节点 位 置 需 要 重新 定位 . 需要 根据 wrap[ 0] 
找到 幅 套 的 层 数 : | 

j= wrap[ 0.: | 


while (j--) { 
tmp = tmp.lastChild: 


} 
第 6 步 ，fragment 还 不 确定 是 最 终结 来 ， 因 为 node 可 能 还 有 其 他 的 节点 ， 所 以 需要 进一步 处 理 : 


fragment.textContent 一””: 
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2 从 入 门 到 精通 ( 币 课 精 编 县 ) 


第 7 步 ， 构 建文 档 片 段 。 


while ((elem = nodes[i++])) { /迭代 所 有 转换 的 DOM 节点 
/ 跳 过 selection 中 的 元 素 
It(sSelectlon && JQuery.InArray(elem, selection) > -1) { 


if (ignored) { // 如 果 参 数 ignored 为 tue， 则 忽略 指定 元 素 
ienored.push(elem): / 把 元 素 推 人 ignored 

} 

continue: 


} 

/判断 当前 元 素 是 否 包含 在 文档 根 节点 下 

contalns = JQuery.contains(elem.ownerDocument, elemy): 

/把 当前 元 素 追 加 到 片段 

tmp = getAll(fraement.appendChild(elem), "script"); // 在 元 素 中 查找 所 有 script 标签 


/保留 脚本 评估 历史 
if (contains) { / 如 果 包 含 在 文档 根 节点 下 ， 则 标记 保存 
setGlobalEval(tmp): 
} 
if (scripts) { /捕获 可 执行 文件 
1 
while ((elem = tmp[j++]) { /只 代 所 有 script 标签 
if (rscriptType.test(elem .type || "")) { 1/ 处理 script 标签 
scripts.push(elem): 
} 
} 
} 


} 


如 有 果 元 素 和 目标 元 素 相 同 的 ， 则 执行 特殊 操作 。 
1{ (selection && JQuery.inAIrray(elem, selection)> -1){ 


if (ignored) { // 如 果 参 数 ignored 为 tue， 则 忽略 指定 元 素 
ienored.push(elem): // 把 元 素 推 人 ignored 
continue: 
} 
然后 ， 遍 历 每 个 元 素 ， 并 把 它们 放 人 文档 片段 中 。 
fraement.appendChild( elem ) 


同时 针对 script 标签 进行 处 理 。 
最 后 ， 返 回 fragment。 


6.4 accessO 与 DOM 操作 


access0 也 是 DOM 操作 的 一 个 底层 困 数 ， 在 att、prop、text、html、css、data 等 接口 中 都 调用 了 accessO0 
sl 六 0 例如 : 
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attr: function(name, value) { 

return JQuery.access(this, JQuery.attr, name, value, areuments.leneth > 1): 
L 
prop: function(name, value) { 

return 1]Query.access(this, JQuery.prop, name, value, areuments.leneth > 1):; 
} 
text: function(value) { 

return 1Query.access(this, function (Value) + 

/ 功能 代码 段 
+, null, value, areuments.leneth): | 


} | 
html: function(value) { 
return JQuery.access(this, function (Value) + 
// 功能 代码 段 
}, null, value, areuments.leneth): | 
} 
css: mction(name, value) { | 
return jQuery.access(this, function (elem, name, value) { | 
/ 功能 代码 段 | 
}, name, value, areuments.length > 1): 


} 
data: function(key, value) { | 
//code | 
return JQuery.access(this, function (value) { | 
/ 功能 代码 自 
}, null, value. arguments.length > 1, null, true); 

} 


如 ，css0 方法 的 使 用 方法 如 下 : 


$(selector).css(key) //getter 
$(selector).css(key,valye) //setter 
$(selector).css({keyl:valyel.key2:value2}) //setter 
$(selector).css(tunction(){ *** }) //setter 


源码 如 下: 


/获取 和 设置 集合 值 的 多 功能 方法 
// 参数 说 明 如 下 : | 
//elems: 元 素 集合 | 
// 血 : 回调 | 
//key: 键 

//value: 值 
//chainable: 0 为 读 取 ; 1 为 设置 | 
//emptyGet: 一 般 不 提供 该 参数 ， 当 没有 元 素 时 返回 undefined | 
/raw: 字符 串 为 真 ， 孙 数 为 假 | 
var access = function (elems, fn, key, value, chainable, emptyGet, raw) + 

Var 1= 0, 
len = elems.leneth, 


条 


access( 是 一 个 多 功能 值 操作 的 私有 工具 函数 。access 可 以 使 用 getter/setter 方法 在 一 个 函数 中 体现 。 例 
| 
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bulk = key — null: 


if (jQuery.type(key) 一 一 "object") { // 如 果 是 jQuery 对 象 
chainable = true: 
for (i in key) { // 迭代 集合 内 元 素 


access(elems, fh, i, key[il, true, emptyGet raw);// 使 用 当前 元 素 递 归 调 用 


} 
/ 设置 一 个 值 


| } else if (value !— undefined) { // 如 果 传 递 参 数 value 
| chainable = true: 1/ 链 式 标识 
// 赋值， 如 .attr( attributeName, function(index, attr) ) 传人 的 value 就 是 一 个 图 数 
if (!jQuery.isFunction(value)) { // 如 果 参 数 value 不 是 函数 ， 则 设置 标识 变量 raw 
TaW = true: 
} 
//key 不 为 null 或 者 undefined 时 
lf (bulk) { 
// 批量 操作 ， 针 对 整个 集合 运行 
1f (raw) { 
tn.call(elems, value): 
fn = null: 
// 除非 执行 函数 值 
+ else{ 
bulk = fn: 


tn = function (elem, key, value) { 
return bulk.call({JQuery(elem), value): 


上 
// 如果 第 二 个 参数 函数 存在 
(fn) { 
for (:i<len:it+) { /对 jQuery 中 的 每 个 元 素 调 用 回调 函数 


/如果 raw 不 是 函数 fn(elems[i], keyvalue): 
1/ 如 果 raw 是 困 数 : fh(elems[il, key,value.call( elems[il, i 和 (elems[i], key ))): 


tn( 
elems|1|], key, raw ? 
value : 
value.call(elems[il, i, fhn(elems[il. key)) 
| 


4 
} 
上 
/ 如果 是 链 式 ， 返 回 jQuery 对 象 
1f (chaimable) { 
return elems: 


} 

/获取 值 

if (bulk) { //key 为 undefined 或 者 null 
return fn.call(elems): 


} 
// 如 果 jQuery 对 象 有 长 度 ， 获 取 对 象 第 一 个 元 素 的 键 值 ， 否 则 返回 emptyGet 
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return len ? fn(elems[0|], key) : emptyGet: 
}; 
access() 中 数 包含 的 功能 比较 坚 杂 ， 读者 可 以 先 大 怪 了 解 各 个 参数 的 语义 ,然后 查看 源 公 最 下 面部 分 ， 
可 以 发 现 当 chainable 为 1 时 ， 表 示 设 置 ， 和 直接 返回 元 素 集 合 ， 方 便 链 式 调用 ， 而 为 0 时， 表示 获取 。 
// 如 果 是 链 式 ， 返 回 jQuery 对 象 


1 (chamable) { 
return elems: 


} 

// 获取 值 

if (bulk) { //key 为 undefined 或 者 null 
retulm fn.call(elems): 

} 


在 获取 的 部 分 又 做 了 判断 ， 因 为 bulk=key 一 mnul， 当 没有 key 的 时 候 ,bukk 为 真 ， 所 以 会 执行 fh.call(elems)， 
否则 执行 下 面 代码 : 
return len ? fn(elems[0], key) : emptyGet: 


当 bulk 为 假 时 ， 先 判断 元 素 是 否 有 长 度 ， 如 果 有 ， 则 执行 回调 ， 否 则 返回 undefined。 
了 解 getter 方法 后 ， 继 续 看 setter 方法 。setter 方法 有 以 下 3 种 形式 : 
町 ” 键 值 对 : 如 $(selector).css(key,valye)。 
名 ”key 为 对 象 : 如 $(selector).css({keyl:valyel,key2:value2}) 。 | 
加 ”key 为 图 数 : 如 $(selector).css(functionO{…:)。 | 
返回 access0 函数 源码 开头 部 分 ， 会 发 现 除了 最 底部 是 处 理 getter 方法 外 ， 其 余 的 部 分 都 在 处 理 setter 
方法 。 从 下 面 代 码 自 可 以 看 出 ， 半 处 理 键 为 对 象 ，else 证 处理 非 对 象 ， 在 else 证 中 又 分 别处 理 当 参 数 为 键 值 
对 和 key 为 图 数 的 两 种 形式 。 
if( key && typeof key 一 二 "object" ) { 
/省 略 部 分 代码 
+ else 1 ( value !== undefined ) { 
// 省 略 部 分 代码 
1 


当 键 为 对 象 时 ， 它 的 处 理 方式 是 利用 递归 再 执行 一 次 access0 困 数 。 
站 ( Key && typeot key 一 二 "oblect” ) { 

for(11m key ) 1{ 

]Query.access( elems, fn, 1, key|1|. 1, emptyGet, value ): 

} 

chainable = 1; 
+ else 1f ( value !— ndefined ) { 

/省略 部 分 代码 
} 


当 键 为 非 对 象 时 ， 先 判断 值 不 为 空 ， 进 入 后 做 了 以 下 4 件 事情 。 

(1 ) 如 果 值 是 靖 数 ， 则 exec 为 真 。 

(2 ) 如 果 键 为 空 ， 则 值 为 函数 时 做 了 相应 的 处 理 ; 值 为 字符 串 时 执行 回调 。 
(3 ) 循环 元 素 集 合 执行 回调 。 
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(4) 把 chainable 设置 为 1， 方便 在 returm 中 进行 处 理 。 
1{ JQuery.type(key) 一 一 "object ) ! 
chamable = true: 
for (1 in key) { 
access(elems, fn, 1, key|1|. true, emptyGet raw); 


} 
+ else 二 (Value !== undefined) { 
chaimable = true: 
if (!1JQuery.isFunction(value)) { 
raw = true; 
} 
if (bulk) { 
1f (Taw) t 
fn.call(elems, value): 
fn = null: 
} else { 
bulk = nh: 
fn = function (elem, key, value) { 
retum bulk.call(JQuery(elem), value): 
} 
} 
1{ (fn) + 
for (i<len;itt){ 
fn( 
elems|1|], key, raw ? 
value : 
value.call(elems[il, i, fn(elems[il], key)) 
} 
} 
} 


} 


以 上 代码 比较 烦琐 ， 其 实 一般 情 况 是 直接 进入 第 (3 ) 步 ， 因 为 在 设置 css0 的 时 候 ，key 都 是 字符 串 ， 
而 第 (2 ) 步 主要 就 是 针对 key 为 函数 的 情形 。 


6.5 DOM 操作 接口 


jQuery 针对 DOM 操作 的 插入 方法 有 10 种 : append、prepend、before 、after 、replaceWith 、appendTo、 
prependlo、1msertBefore 、1insertAtter、replaceAll, 

分 2 组 ,前 5 种 方法 与 后 5 种 方法 对 照 ， 实 现 同样 的 功能 。 主 要 的 区 别 是 语法 ,特别 是 内 容 和 目标 的 
位 置 ， 这 些 方法 依赖 domManip 和 buildFragment 模块 。 

在 匹配 元 素 集 合 中 的 每 个 元 素 后 面 插 入 参数 所 指定 的 内 容 ， 例 如 ， 对 于 after0 方法 ， 选 择 表 达 式 在 隆 
数 的 前 面 ， 参 数 是 将 要 插入 的 内 容 ; 而 对 于 insertAfter0 方法 刚好 相反 ， 内 容 在 方法 前 面 ， 它 将 被 放 在 参数 
里 元 素 的 后 面 。 
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6.5.1 after 


after function () + 
return domManip(this, areuments, function (elem) { 
1f (this.parentNode) { 
this.parentNode.nsertBefore(elem, this.nextSibling): 


} 
}); 
} 


DOM 操作 的 所 有 方法 依靠 domManip 合并 参数 处 理 ， 内 部 通过 buildFragment 模块 构建 文档 片段 。 然 
把 每 个 方法 的 具体 执行 通过 回调 函数 的 方式 提供 出 来 并 进行 处 理 。 
DOM 操作 并 未 提供 一 个 直接 可 以 在 当前 节点 后 插入 一 个 兄弟 节点 的 方法 ， 但 是 提供 了 一 个 类 似 的 方 


Th 


法 : insertBefore0 ， 使 用 它 可 以 在 已 有 的 子 节 点 前 插 人 一 个 新 的 子 节 点 。 用 法 如 下 : 
nsertBefore(newchild,retchild) 
inner.atter('<p> Test</p>"): 


内 部 就 把 '<p>Test</p>' 通过 buildFragment 构建 出 文档 elem。 然 后， 通过 下 面 代 人 码 完 成 操作 : 
this.parentNode.mnsertBefore( elem. this.nextSibline ): 


这 里 的 this 就 是 对 应 的 inner，elem 就 是 <p>Test</p>。 
用 原生 方法 简单 模拟 ， 代 码 如 下 : 


var mner = document.getElementsByClassName('inner’) 
for(var 1 =0 : 1<inner.length:1tH+){ 
Var elem = mner|1| 
Varp = document.createElement('p') 
Pp.InnerHIML = "Test' 
elem.parentNode.1msertBetore(p. elem.nextSibling) 


6.5.2 InsertAfter 


jQuery 的 代码 设计 得 很 巧妙 ， 会 尽 可 能 地 合并 相似 的 功能 ， 让 代码 更 加 精练 、 优 雅 。 


JQuery.each(! 
appendTo: "append", 
prependTo: "prepend", 
nsertBetore: "before", 
lnsertAfter: "after", 
replaceAll: "replace With" 
+, fnction( name, original ) { 
JQuery.fn| name | = function( selector ) { 


°° 171. 


Js 入 和 门 到 精通 (机 课 精 编 县 ) 


/ 功能 代码 
}); 
$(<p>Test</p>").insertAfter('.inner’): 
通过 $(<p>Test</p>') 构建 一 个 文档 片段 ， 通 过 insertAfter0 方法 插入 所 有 class 等 于 inner 的 节点 。 表 达 


的 意思 与 after 是 一 样 的 ,不 同 点 是 语法 ， 即 内 容 和 目标 的 位 置 。 
J]JQuery.fn[name| = function (selector) { 


Var elems. 
ret = [], / 操作 集合 
insert = jQuery(selector), 1// 插 入 DOM 集合 
last = insert.length - 1, /最 后 一 个 
1= 0; 


for (; 1<— last; HH+) { 
elems = 1 一 一 ]ast ? this : this.clone(true); 
jQuery(insert[i])[original](elems); // 使 用 原 方法 ， 反 向 操作 
push.apply(ret, elems.get()); 


上 
retum this.pushStack(ret): // 转换 为 jQuery 对 象 ， 并 返回 
PE 


在 具体 的 实现 方法 (insertAfter(.inner”) ) 中 ，inner 其 实 就 被 当 作 selector 传人 进来 了 ，selector 可 能 只 
是 字符 串 选 择 带 ， 内 部 需要 转化 : insert = jQuery( selector )。 

$(<p>Test</p>") 就 是 构建 出 来 的 文档 片段 节点 ， 如 果 有 多 个 insert， 就 需要 完全 克隆 一 份 副 本 ， 所 以 就 
直接 赋 给 


elems = 1 一 一]ast ? this : this.clone( true ): 


JQuery( nsert[ 1 | )| original |( elems ); 

依旧 是 执行 after0 方法 。 

jQuery( insert[ i ] )[ original ]( elems ): 

最 终 还 帘 要 返回 这 个 构建 的 新 节点 ， 收 集 构建 的 节点 ， 代 公 如 下 : 
push.apply( ret, elems.get() ): 

构建 一 个 新 jQuery 对 象 ， 以 使 实现 链 式 语法 ， 代 人 码 如 下 : 
this.pushStack( ret ): 


由 此 可 见 ，after0 方法 与 insertAfter0 方法 本 质 其 实 都 是 一 样 的 ， 只 是 通过 不 同 的 方式 调用 。 


6.5.3 before 


根据 参数 设 定 ， 在 匹配 元 素 的 前 面 插 人 内容 ， 源 但 如 下 : 
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betore: function () { 
return domManip(this, areuments, function (elem) + 
1{ (this.parentNode) { 
this.parentNode.msertBetore(elem, this): 
’ 
2 
} 


设计 思路 类 似 于 after， 只 是 替换 了 第 二 个 参数 ， 改 变 插 入 的 位 置 。 
6.5.4 append 


在 每 个 匹配 元 素 的 末尾 处 插入 参数 内 容 ， 源 码 如 下 : 
append: function () { 
retum domManip(this, areuments, function (elem) 1 
1 (this.nodeType =—= 1 || this.nodelype —= 11 || this.nodelype ~—= 9) 1 
var target = manipulation Target(this, elemy): 


target.appendChild(elem):; 
} 
} 
在 内 部 增加 节点 ， 可 以 直接 调用 appendChild0 方法 。 


6.5.5 prepend 


将 参数 内 容 插入 每 个 匹配 元 素 的 前 面 ( 元 素 内 部 )， 源 码 如 下 : 
prepend: function () { 
return domManip(this, areuments, function (elem) 1 
1{ (this.nodeType —= 1 || this.nodelype —= 11 || this.nodeType —= 9) { 
var target = manipulation Target(this, elem): 
target.insertBefore(elem., target.firstChild): 
} 
)); 
} 


设计 思路 类 似 于 after， 只 是 蔡 换 了 第 二 个 参数 ， 改 变 插 人 的 位 置 。 


6.5.6 replaceWith 


使 用 提供 的 内 容 蔡 换 集 合 中 所 有 匹配 的 元 素 ， 并 且 返 回 被 删除 元 素 的 集合 。 
【示例 】 使 用 replaceWith0 方法 可 以 从 DOM 中 移 除 内 容 ， 然 后 在 这 个 地 方 插入 新 的 内 容 。 
<div class="contalner > 

<div class= "inner first">Hello</div> 

<dv class="Iinner second">And</div> 
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<dv class="Inner third"~>Goodbye</div> 
</div> 


| 可 以 使 用 指定 的 HTML 替换 第 二 个 <div class="inner second">， 人 代码 如 下 : 
$('div.second').replace With('<h2>New heading</h2>"): 


| 结果 如 下 : 
<div class="container"> 
<dv class="inner first">Hello</div> 
<h2>New heading</h2> 
<dv class="1nner third">Goodbye</div> 
</div> 


或 者 可 以 选择 一 个 元 素 ， 替 换 为 新 的 内 容 ， 代 人 码 如 下 : 
$(div.third").replace With($('.first")): 
结果 如 下 : 
<dlv class="container"> 
<dlv class="inner second">And</dIv=> 


<dv class="inner first">Hello</div=> 
</div> 


从 上 面 示 例 可 以 看 出 ， 用 来 蔡 换 的 元 素 从 原 位 置 移 到 新 位 置 ， 而 不 是 复制 。 

replaceWithO 与 其 他 大 部 分 jQuery 方法 一 样 ， 返 回 jQuery 对 象 ， 所 以 可 以 和 其 他 方法 链接 使 用 ， 但 是 
”要 注意 : replaceWith0 方法 返回 的 对 象 指向 已 经 从 DOM 中 被 移 除 的 对 象 ， 而 不 是 指向 蔡 换 用 的 对 象 。 
| replaceWith( 方法 源码 如下: 


replace With: function () { 
var lpnored = [|: 
// 进行 更 改 ， 用 新 内 容 替 换 每 个 不 被 忽略 的 上 下 文 元 素 
retum domManip(this, areuments, function (elem) { 

var parent = this.parentNode: 

站 (jQuery.inArray(this, ignored) <0) { ”// 如 果 没 有 忽略 
jQuery.cleanData(getAll(this)); /清除 附加 数据 
1f (parent) { 

parent.replaceChild(elem, this):; // 执行 替换 操作 


4 
} 
1/ 强制 回 再 
}, 12gnored); 
} 
6.2./ html 


| jQuery.fn.html 这 个 API 同时 具有 三 个 功能 : 创建 元 素 、 插 入 元 素 和 移 除 元 素 。jQuery.fhhtml 本 身 是 对 
” ”Element.prototype.innerHTML 的 封装 ， 对 于 元 素 的 创建 , jQuery 也 使 用 这 个 方法 ， 所 以 jQueryfnhtml 并 没有 调用 
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buildFragment， 而 是 直接 调用 innerHIML。 不 过 对 于 ft、td、option 等 只 能 在 特定 父 元 素 下 创建 的 元 素 ，jQuery 
\ 会 直接 用 innerHTML， 而 是 会 通过 append 来 实现 ， 这 样 就 会 调用 buildFragment 生成 这 种 对 象 。 例 如 : 


$("<dIv>") html("<tr>") 
$("<div>")[0].innerHTML = "<tr></tr>" 


第 二 行 代码 是 无 法 创建 出 tr 对 象 的 ， 而 第 一 行 代 人 码 是 可 以 的 。 因 为 jQuery 会 调用 buildFragment 来 创 
建 ， 补 充 table 和 tbody 两 个 父 元 素 套 在 tr 的 外 边 ， 等 创建 成 功 后 再 移 除 掉 。 
jQuery.fn.html 这 样 做 ,使 其 可 以 在 不 同情 况 下 优先 使 用 在 保证 功能 实现 的 情况 下 效率 最 高 的 方法 。 
同时 jQuery.fn.html 还 是 个 setter 和 getter 的 重 载 图 数 ，jQuery 使 用 模板 模式 加 肾 数 柯 里 化 实现 setter 和 
getter 重 载 的 方法 access()， 这 个 jQuery.fn.html 就 是 access0 方法 的 一 个 应 用 。 
jQuery.fn.html 是 一 个 非常 典型 的 DOM API 的 实现 ， 支 持 setter 和 getter， 对 训 览 硕 兼 容 做 了 调整 ， 对 
应 innerHTML 却 未 必 直 接 调用 它 ， 还 有 很 多 API 使 用 了 这 样 的 封装 形式 ， 这 里 不 再 一 一 分 析 。 
html0 方法 的 源 公 如 下 : 
html: function(value) { 
return access(this, function(value) 1 
var elem = this[0] || 人 i, / 获取 第 一 个 元 素 
1 = 0, 
1= this.length: 
// 如 果 没 有 参数 ， 直 接 返回 第 一 个 元 素 的 HIML 字符 串 
1{ (value 一 一 Undefined && elem.nodeType —= 1) 1{ 
returm elem.innerHTML: 


} 

/ 判断 是 否 可 以 采取 快捷 方式 ， 只 使 用 innerHTML 设置 值 

L (typeot value —— "string" && IrnoInnerhtml.test(value) && 
'wrapMapl[(rtagName.exec(value) || [™, ™D[1].toLowerCaseOD) { 
value = JQuery.htmlPrefilter(value); 


try { 
for :i<1itt) { // 迭代 集合 元 素 
elem = this[i] | 人: // 获取 当前 元 素 
/删除 元 素 节 点 并 防止 内 存 泄露 
it (elem.nodelype =— 1) { 
jQuery.cleanData(getAll(elem., false)); // 删除 附加 事件 属性 或 数据 
elem.innerHTML = value: // 插 入 HTML 字符 串 
- 
} 
elem = 0: /恢复 为 0， 避 免 后 面 再 操作 
// 如 果 使 用 innerHTML 引发 异常 ， 请 使 用 回 退 方法 ， 避 人 免 抛 出 异常 
+ catch(e){} 
} 
让 (elem) {// 如 果 不 支 持 innerHTML， 则 使 用 append0 方法 添加 值 
this.empty().append(value); 
} 
+, null value, areuments.lenegth): 


} 


使 用 html0 方法 可 以 获取 任意 一 个 元 素 的 内 容 。 如 末 选 择 表 匹配 多 个 元 素 ， 那 么 只 有 第 一 个 匹配 元 素 
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在 上 面 源码 中 ， 主 要 使 用 jQuery 的 accessO 私有 上 数 实现 读 、 写 操作 ， 针 对 nodeType 一 = 1 的 节点 是 
通过 浏览 器 接口 innerHTML 返回 需要 的 值 。 

有 些 浏 览 器 返回 的 结果 可 能 不 是 原始 文档 的 HIML 源 代码 。 例 如 ， 如 果 属 性 值 只 包含 字母 数字 字符 ， 
IE 有 时 会 丢弃 包 庄 属性 值 的 引号 ， 因 此 使 用 “!wrapMap[(GtagName.exec(value) || ["", ""D[1].toLowerCase0])” 
对 其 进行 适当 处 理 。 

使 用 html0 方法 来 设置 元 素 的 内 容 时 ， 这 些 元 素 中 的 任何 内 容 会 被 新 的 内 容 完 全 取代 。 上 此外， 用 新 的 
内 容 蔡 换 这 些 元 素 前 ，jQuery 通过 “jQuery.cleanData(getAll(elem, false)):” 从 子 元 素 删除 其 他 结构 ， 如 数据 
和 事件 处 理 程 序 ， 防 止 内 存 游 出 。 

对 插入 的 值 还 要 做 一 下 过 滤 处 理 : 必须 是 字符 串 ， 而 且 不 能 包含 script、style 、link， 并 且 不 是 上 等 表格 元 素 。 

ImoInnerhtml = /<script|<style|<link/1 

htmlPrefilter: function (html) { 

retum html.replace(rxhtmlTag, "<$1></$2>"); 


1f{ (typeot value —= "strine” && lrnoInnerhtml.test(value) && 


IwrapMap[(rtagName.exec(value) || ["™", ""D[1].toLowerCaseO]) { 
value = JQuery.htmlPrefilter(value): 


/省 略 部 分 代码 
} 
6.5.8 text 


text0 方法 能 够 获取 匹配 元 素 集合 中 每 个 元 际 的 文本 内 容 组 合 ， 包 括 后 代 元 素 的 内 容 ， 或 设置 匹配 元 素 
集合 中 每 个 元 素 的 文本 内 容 为 指定 的 文本 内 容 。 
凑 提示 : 与 html0 方法 不 同 ，text0 在 XML 和 HTML 文档 中 都 能 使 用 。 
textO 方法 的 源码 如 下 : 
text: function(value) { 


return access(this, function (value) { 
returmn value =—— undefined ? 


jQuery.text(this) : 1/ 取 值 
this.emptyO.each(fonction O { /如 果 没 有 参数 ， 则 只 代 每 个 元 素 
1f (this.nodeType —= 1 || this.nodeType —— 11 || this.nodelype 一 9) { 
this.textContent = value: / 设置 值 
和 
入: 
}, Dull, value, areuments.length): 


b 

在 取 值 时 ，jQuery.text( this ) 实际 调用 Sizzle.getText(。 
JQuery.text = Slz7zle.getText: 

getTextO 陋 数 的 源码 如 下 : 

// 工具 方法 ， 获 取 DOM 元 素 集合 的 文本 内 容 

// 一 个 用 来 检测 DOM 节点 《数组 ) 的 文本 值 的 通用 函数 
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getText = Silzzle.getText = function (elem) { 
Var node, 
wef = 
1=0, 
nodeType = elem.nodeType: 
if (inodeType) { 
// 没有 nodeType， 可 能 是 node 数组 
while ((node = elem[1++|) { 
// 遍历 数组 节点 ,把 结果 连接 起 来 
ret += getText(node): 


} 

+ else 下 (nodeType =— 1 || nodelype —= 9 | nodeType —— 11)1 
// 如 果 是 元 素 节 点 /Document 类 型 /DocumentFraement 类 型 
/ 使 用 textContent 属性 
// 移 除了 innerText 来 保证 一 致 性 
(typeoft elem.textContent —= "strne") { 

// 是 字符 串 类 型 
return elem.textContent: 
+ else { 
// 否则 侦 历 孩子 节操 
for (elem = elem.firstChild: elem: elem = elem .nextSibline) { 
/递归 调用 
ret += getText(elem):; 


} 


+ else 1{ (nodelype =— 3 || nodeType —= 4) 1 
1/ 如果 是 文本 节点 ,或 CDATA Section， 返 回 nodeValue 
return elem.nodeValue: 


} 

/上 面 的 判断 保证 了 不 会 包含 注释 或 处 理 命令 节点 
/返回 结果 

Tetulimn ret: 


} 


jQuery 没有 采用 innerText 获取 文本 的 值 ， 是 因为 在 正 8 中 新 节点 插入 会 保留 所 有 回 车 ， 所 以 jQuery 
采用 了 textContent 获取 文本 值 ，textContent 是 DOM 3 规范 的 ， 可 以 蕴 容 Firefox 的 innerText 问题 。 

由 于 不 同 浏览 带 的 HIML 解析 变化 ， 返 回 的 文本 中 换行 和 其 他 空白 可 能 会 有 所 不 同 。textO 方法 不 能 用 在 
input 或 scripts 元 素 上 ， 需 要 使 用 val0 方法 获取 或 设置 input 的 值 ， 使 用 html0 方法 获取 或 设置 script 元 素 的 值 。 ， 


6.5.9 val 


val0 方法 可 以 获取 匹配 元 素 集合 中 第 一 个 元 素 的 当前 值 ， 或 者 设置 匹配 的 元 素 集 合 中 每 个 元 素 的 值 。 
主要 用 于 获取 表单 元 率 的 值 ， 如 input、select 和 textarea。 

Val0 方法 的 源码 如 下 : 

Var ITetum = /\r/g: 1/ 回 车 换行 符 


JQuery.fn.extend({ 
val: function(value) { 
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Var hooks. Tet 1SFunction 


elem = thls|0|: 
| // 如 果 是 获取 操作 ， 也 就 是 参数 为 0 时 
| if (1areuments.length) { // 如 果 没 有 传递 参数 
| if (elem) { 


hooks = JQuery.valHookslelem.type| | 
| J]Query.valHooks[elem.nodeName.toLowerCase()|: 
| //valHooks 有 以 下 几 个 属性 对 象 :option (下 拉 框 的 子 选项 )、select (下 拉 框 入 radio ( 单 选 按钮 )、 
| //checkbox ( 复 选 框 ) 
/也 就 意味 着 需要 对 这 四 种 元 素 进行 兼容 性 处 理 
/ 其 中 radio 的 type=radio，checkbox 的 type=checkbox ，select 的 type 默认 为 select-one ( 单 选 ) 
/还 可 以 设置 成 select-multiple ( <select multiple><option></option></select>， 多 选 ) 
二 (hooks && 
"get" 1n hooks && 
(Tet = hooks.get(elem, "value")) !== undefined 
) 1 
return ret: 
} 
ret = elem.value: 
1/ 处理 最 常见 的 字符 串 例子 
1f (typeof ret —— "string") { 
return ret.replace(Ireturn, ™"); 
} 
// 处 理 value 为 null/undefined 或 数字 的 情况 
return ret == null ? "™ : ret: 


} 
return: 
} 
isFunction = jQuery.isFunction(value); 。“// 判断 值 是 否 为 图 数 
retum this.each(function (i) { / 设置 操作 ， 针 对 每 个 元 素 
Var val: 
if (this.nodeType !=— 1) { / 必须 是 元 素 节点 
TetuIn: 
} 
1{ (1sFunction) { 
val = value.call(this, 1 jQuery(this).val()): 
} else { 
val = value: 
} 
/将 nullundefined 视 为 ". 将 数字 转换 为 字符 串 
if (val 一 mulD { 1// 针对 这 种 情况 : $("input").val(null): 
val=""; 
} else if (typeof val 一 一 "number") { /如 果 传 人 的 是 数字 类 型 ， 就 转换 成 字符 串 
val +="™"; 


/这 里 是 针对 checkbox 和 radio 元 素 的 ， 如 $("##input2").val(["hello"]):; 如 果 传 人 的 是 字符 串 ， 则 
/ 对 checkbox 的 value 属性 赋值 ， 但 是 传人 数组 ， 就 需 判 断 checkbox 的 value 是 否 等 于 hello， 如 
// 果 等 于 ， 就 被 选择 上 ， 否 则 不 被 选择 上 
} else 1{ (Array.isArray(val)) { 
val = JjQuery.map(val, function (value) { 
retum value 一 null ?> "™ : value + ™": 
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1): 
| 
hooks = JQuery.valHooks|this.type| || J]Query.valHooks|this.nodeName.toLowerCasel( )|; | 
// 如 果 设 置 返回 未 定义 ， 则 回 到 正常 设置 
1f (lhooks || !("set" In hooks) || hooks.set(this, val, "value") 一 二 Undefined) { | 


this.value = val: 
) | 
}); | 
} | 
1 | 
下 面 结合 一 个 示例 说 明 val0 方法 是 获取 元 素 值 的 。 | 
<script> | 
$(fimction (O { | 


var p = $("#multipleselect") | 
p.change(function () { | 
console.log(p.valO): | 

Fe 
有 
</script> | 
<select size="10" multiple="multiple" 1d="multipleselect" name="multipleselect"> | 
<option>HTML</option> | 
<option>CSS</option> 
<option=>JavaSscript</option> 
<option>PHP</option> 
<option>PERL</option> 
</select> 


| 
对 于 <select multiple="multiple"> 元 素来 说 ，val0 方法 返回 一 个 包含 每 个 被 选择 的 选项 数组 ， 如 果 没 有 


选项 被 选中 ， 它 返回 null， 如 图 6.5 所 示 。 


图 6.5 ”val0 方法 的 返回 值 


如 果 单 选 ， 人 简单 使 用 element.value 即 可 。 和 针对 多 选 的 情况 ，jQuery 对 value 属性 的 兼容 性 处 理 ， 主 要 通 / 
过 valHooks 来 实现 。 引 入 jQuery.valHooks， 修 正 了 在 不 同情 况 下 表单 取 值 的 bug， 其 中 就 有 针对 select 的 
setter 与 getter 的 人 处理。 | 


T 
ss 


篇 提示 : 兼容 处 理 ， 在 jQuery 中 称 为 hooks。 针 对 不 同 的 兼容 处 理 有 不 同 的 hooks 来 处 理 。 例 如 ， 对 于 
value 值 ， 就 有 valHooks; 对 于 属性 值 ， 就 有 attrHooks 和 propHooks 等 。 | 
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valHooks 的 具体 源码 如 下 : 


JQuery.extend( + 
valHooks: { 1// 菩 容 Val0 方法 处 理 

// 当 获 取 option 元 素 的 value 属性 值 时 ， 如 果 没 有 对 此 option 显 式 设置 value 值 ， 获 取 到 的 值 是 option 的 

// text， 也 就 是 option 的 文本 ,但 是 正 6、 正 7 下 获取 到 的 值 是 "" 

option: { 

get: fnction (elem) + 
var val = jQuery.find.attr(elem, "value :在 正 6、 正 7 下，val 是 一 个 object 
1/ 如果 val != null 为 tue， 就 代表 value 被 显 式 设置 了 ， 因 此 直接 返回 val 
// 如 果 为 false， 就 代表 没有 显 式 设置 ， 因 此 返回 elem text 
return val ‘= null ? 
val : stripAndCollapse(JQuery.text(elem)); 


} 
. 
select: 1 
// 当 select 是 单 选 时 ， 获 取 的 value 值 ， 就 是 选择 的 那个 option 的 值 
// 如 果 是 多 选 ， 获 取 值 时 ， 就 是 选择 的 所 有 option 的 值 的 数组 形式 
get: function (elem) { 
var value, option, 1, 


options = elem.options, //select 的 所 有 option 的 集合 
index = elem.selectedIndex. / 当前 选择 的 option 的 索引 值 
one = elem.type =——— "select-one", 
values = one ? null : [], // 如 果 是 单 选 ，values=null; 如 果 是 多 选 ，values=[] 
max = one ? index + 1 : options.leneth: 
if (index < 0) { 
1 = Max; 
+ else { 
1= one ? ndex : 0: 
} 
1/ 表 历 了 所有 选择 的 选项 
for (;i< max; it+) { / 单 选 ， 循 环 一 次 ; 多 选 ， 循 环 多 次 


option = options|1|: 
/TIE 6~9 下 ， 单 击 reset 按钮 时 ，option 的 selected 不 会 恢复 默认 值 ， 其 他 浏览 器 会 恢复 所 有 
//option 的 selected 的 默认 值 
1{ ((option.selected || 1 =—— Index) KK 
loption.disabled && /如 果 option 被 设置 了 disabled， 那么 获取 option 的 值 时 ， 是 获 
1/ 取 不 到 的 
(loption.parentNode.disabled || / 如 果 option 的 父 元 条 被 设置 了 disabled， 并 且 父 元 素 是 
/optgroup ， 那 么 也 获取 不 到 
InodeName(option.parentNode, "opteroup"))) + 
value = jQuery(option).val0: // 针对 option， 获 取 选 项 的 具体 值 
if (one) { / 如果 是 单 选 ， 不 需要 一 个 选择 数组 
return value: 


b 
/如 果 是 多 重 选择 ， 返 回 一 个 数组 
values.push(value): 

| 


} 
return values: 
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le 
set: function (elem, value) { 
Var optionSet, option., 
options = elem.options, 
values = jQuery.makeArray(value),// 把 value 转换 成 数组 
1= options.leneth: 
while (1--) 4 
option = options[1|: 
// 判断 select 的 子 元 素 option 的 value 是 否 在 values 数组 中 ， 如 果 在 ， 就 会 把 这 个 option 选中 
1f (option.selected = 
J]Query.InAIray(JQuery.valHooks.option.get(option), values) > -1 
) 1 
optionSet = true: 


} 


} 
// 如 果 select 下 的 option 的 value 值 没有 一 个 等 于 value 的， 那么 就 让 select 的 选择 索引 值 赋 为 -1， 
/让 select 框 中 没有 任何 值 
1 (loptionSet) { 
elem.selectedIndex = -1: 
} 


return values: 


} 
} 


}); 
// 单 选 按钮 和 复 选 框 的 getter/setter 处 理 
J]Query.each(["radio", "checkbox"|, function () { 
J]JQuery.valHooks[this| = { 
set: function (elem, value) { 
睛 当 value 是 数组 时 ， 判 断 此 元 素 的 value 值 是 否 在 数组 value 中 ， 如 果 在 ， 就 让 元 素 被 选择 上 。 此 
元 素 只 有 radio 和 checkbox 这 两 种 */ 
L (Array.isAIrray(value)) { 
retum (elem.checked = JQuery.inArray(JQuery(elem).val(), value) > -1); 
b 
} 

/* 如 果 元 素 是 radio 或 者 checkbox， 去 获取 它 的 默认 value 值 时 ， 旧 版 本 WebKit 得 到 的 值 是 "， 而 其 他 浏览 
器 是 on， 因 此 当 没有 对 此 元 素 显 式 设 置 它 的 value 值 (通过 getAttribute 获取 的 value 的 是 null) 时 ,可 以 
通过 input.value 获取 它 的 默认 值 ， 所 有 浏览 器 都 返回 on*/ | 

1 (I'support.checkOn) { 

J]Query.valHooks[this|.get = function (elem) { 
returmn elem.getAttnbute("value") =—= null ? "on" : elem.value: 
上 
}); 


从 上 面 源码 可 以 看 到 ，jQuery 针对 不 同 的 表单 选择 控件 ， 以 及 setter 和 getter 行为 分 别 进行 定制 ， 以 菲 | 
容 不 同 的 浏览 髓 。 
那么 ， 对 于 设置 值 也 是 一 样 的 ， 通 过 jQueryvalHooks 找到 对 应 的 处 理 hack， 否 则 直接 使 用 “thisvalue=val:”。 ， 
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( 鄙视 频 讲解 : 1 小 时 24 分 钟 ) 


第 6 章 讲 解 了 jQuery 关于 DOM 操作 的 代码 封装 方式 和 思路 ， 作 为 JavaScript 库 ， 
]Query 继承 并 优化 了 JavaScript 访问 DOM 的 特性 ， 使 开发 人 员 更 加 方便 地 操作 DOM。 
本 章 将 具体 介绍 jQuery 操作 DOM 的 方法 ， 以 及 部 分 方法 的 源码 解析 。 


【学 习 重 点 】 

| 操作 节点 。 

六 插入、 编辑 和 删除 文本 字符 
| 操作 属性 和 类 。 

P| 读 写 文本 和 值 。 
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7.] 创建 节点 
在 Web 开发 中 ， 要 创建 动态 网 页 内 容 ， 主 要 操作 的 节点 包括 元 素 、 属 性 和 文本 ， 下 面 分 别 进行 说 明 。 


7.1.1 创建 元 素 


使 用 DOM 的 createElement0 方法 能 够 根据 参数 指定 的 标签 名 称 创建 一 个 新 的 元 素 ， 并 返回 新 建 元 素 的 | 


Var element = document.createElement("taeName"): 


其 中 element 表示 新 建 元 素 的 引用 ，createElementO 是 document 对 象 的 一 个 方法 ， 该 方法 只 有 一 个 参 | 

数 ， 用 来 指定 创建 元 素 的 标签 名 称 。 | 
如 果 要 把 创建 的 元 素 添 加 到 文档 中 ， 还 需要 调用 appendChild0 方法 来 实现 。 | 
【示例 1】 创 建 div 元 素 对 象 ， 并 添加 到 文档 中 。 


window.onload = functionO{ // 页 面 初 始 化 郴 数 
var div = document.createElement("div"):// 创建 div 元 素 
documentbodyappendChild(div): // 把 创建 的 div 元 素 添 加 到 DOM 文档 树 中 
} 
jQuery 简化 DOM 操作 ， 直 接 使 用 jQuery 构造 了 渭 数 $0 创建 元 素 对 象 。 用 法 如 下 : | 
$(html) | 


该 也 数 能 够 根据 参数 html 所 传递 的 HTML 字符 串 创建 一 个 DOM 对 象 ， 并 将 该 对 象 包装 为 jQuery 对 象 | 
返回 。 
< 注意 : 字符 囊 参数 必须 符合 严谨 型 XHTML 结构 要 求 ， 标 记 应 该 包含 起 始 标签 和 结束 标签 。 如 果 没有 

结束 标签 ， 则 应 添加 闭合 标记 ， 即 在 起 始 标 签 中 添加 斜 线 。 例 如 ， 下 面 字 符 串 参数 都 是 合法 的 : 


| 
"<hl></h1>" // 合 法 的 字符 串 参数 / 
"1 // 合法 的 字符 串 参 数 | 
而 下 面 的 字符 囊 参 数 都 是 非法 的 : | 
"<hl>" // 非法 的 字符 串 参 数 | 
"hl>" /非法 的 字符 串 参 数 | 


【示例 2】 动态 创建 的 元 素 不 会 自动 添加 到 文档 中 ,需要 使 用 其 他 方法 把 它 添加 到 文档 中 。 可 以 使 用 
jQuery 的 append0 方法 把 创建 的 div 元 素 添加 到 文档 body 元 素 节点 下 。 


$(functionO{ / 页 面 初始 化 郴 数 
var $div = $("<div></div>"): // 创建 div 对 象 
$("body").append($div): /把 创建 的 div 对 象 添 加 到 文档 中 
}) 
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”在 浏览 器 中 运行 代码 后 ， 新 创建 的 div 元 素 被 添加 到 文档 中 ， 由 于 该 元 素 没有 包含 任何 文本 ， 所 以 看 不 
。 到 任何 显示 效果 。 


总 提示 : jQuery 和 JavaScript 都 可 以 快速 创建 元 素 ,， 但 jQuery 的 用 法 稍 显 简 便 。 从 执行 效率 角度 分 析 ， 
两 者 差距 明显 ，JavaScript 要 比 jQuery 快 10 倍 以 上 , 在 正 8 中 差距 会 拉 大 到 30 倍 以 上 ， 其 他 
主流 浏览 器 的 执行 效率 差距 更 大 。 


7.12 创建 文本 


使 用 DOM 的 createTextNode0 方法 可 以 创建 文本 节点 。 用 法 如 下 : 
document.createTextNode( data) 


| 参数 data 表示 字符 串 。 参 数 中 不 能 包含 任何 HTML 标签 ， 否 则 JavaScript 会 把 这 些 标签 作为 字符 串 进 
” 行 显示 。 最 后 返回 新 创建 的 文本 节点 。 
新 创建 的 文本 节点 不 会 自动 增加 到 DOM 文档 树 中 ， 需 要 使 用 appendChild0 方法 实现 。 
【示例 1】 为 div 元 素 创建 一 行文 本 ， 并 在 文档 中 显示 。 
window.onload = functionO 1{ 
var dv = document.createElement("d1v"): 
var txt = document.createTextNode("DOM"): 


div.appendChild(txt): 
document.body.appendChild(div): 


} 


| jQuery 创建 文本 节点 比较 人 简单， 直接 把 文本 字符 串 添加 到 元 素 标记 宇和 人 特 串 中 ， 然 后 使 用 append0 等 方 
法 把 它们 添加 到 DOM 文档 树 中 。 
【示例 2】 在 文档 中 插入 一 个 div 元 素 ， 并 在 <div> 标签 中 包含 “DOM” 的 文本 信息 。 
$(function(){ 
var $div = $("<div>DOM-</div>"): 
$("body").append($div); 
| 1) 
| 从 代码 输入 的 角度 分 析 ，JavaScript 实现 相对 麻烦 ， 用 户 需 要 分 别 创建 元 素 节 点 和 文本 节点 ， 然 后 把 文 
本 节点 添加 到 元 素 节点 中 ， 再 把 元 素 添 加 到 DOM 文档 树 中 。 而 jQuery 经 过 包装 之 后 ， 与 jQuery 创建 元 素 
节点 操作 相同 ， 仅 需要 两 步 操作 即 可 快速 实现 。 
从 执行 效率 角度 分 析 ，JavaScript 直接 实现 要 比 jQuery 实现 快 8 倍 以 上 ， 在 执行 速度 最 慢 的 正 浏 览 器 
” 中， 两 者 差距 也 在 10 倍 以 上 。 


7.1.3 创建 属性 


使 用 DOM 的 setAttribute 0 方法 可 以 创建 属性 节点 ， 并 设置 属性 节点 包含 的 值 。 用 法 如 下 : 


setAttribute(name,value) 
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参数 name 和 value 分 别 表示 属性 名 和 属性 值 。 属 性 名 和 属性 值 必须 以 字符 串 的 形式 进行 传递 。 如 果 元 
素 中 存在 指定 的 属性 ， 它 的 值 将 被 刷新 ; 如 果 不 存 在 ， 则 setAttribute0 方法 将 为 元 素 创 建 该 属性 并 赋值 。 
【示例 1】 以 7.1.2 节 示 例 1 为 例 ， 调 用 setAttribute0 方法 为 div 元 素 设置 一 个 title 属性， 实现 代码 如 下 : 
window.onload = function(){ 
var dv = document.createElement("div"): 
Var txt = document.create TextNode("DOM"): 


div.appendChild(txt): 
document.body.appendChild(div): 
div.setAttribute("title"," 盒子 "): // 为 div 元 素 定义 title 属性 


} 


jQuery 创建 属性 节点 与 创建 文本 节点 类 似 ， 简 单 而 又 方便 。 

【示例 2】 针 对 上 面 示 例 ， 在 jQuery 构造 吨 数 中 以 字符 串 形 式 简单 设置 。 使 用 jQuery 实现 的 代码 如 下 : 

$(functionO{ 

var $div = $("<div title=' 盒子 '>DOM</div>"): 
$("body").append($div); 

}) 

从 代码 编写 的 角度 分 析 ， 直 接 使 用 JavaScript 实现 需要 单独 为 元 素 设置 属性 ， 而 jQuery 能 够 直接 把 元 
素 、 文 本 和 属性 混在 一 起 以 HIML 字符 串 的 形式 进行 传递 。 

从 执行 效率 角度 分 析 ，JavaScript 实现 与 jQuery 实现 的 效率 差距 很 大 。 在 JavaScript 执行 速度 最 快 的 
Safari 浏览 右 中 循环 执行 1000 次 ， 则 JavaScript 实现 耗 时 为 十 几 曝 秒 ， 而 jQuery 实现 耗 时 为 500 多 室 秒 。 | 
不 同 环境 、 版 本 和 每 次 执行 时 间 可 能 略 有 误差 ,但 是 差距 基本 保持 在 几 十 倍 。 在 执行 速度 最 慢 的 正 浏览 需 | 
中 进行 同比 测试 ，JavaScript 实现 耗 时 为 300 一 400 毫秒 ， 而 jQuery 实现 耗 时 为 3500 多 毫秒 ， 可 见 两 者 差 | 
距 也 在 10 倍 左右 。 | 

由 此 可 见 ，jQuery 以 一 种 简易 的 方法 代 蔡 烦琐 的 操作 ， 简 化 了 Web 开发 的 难度 和 门槛 ， 但 是 由 于 
jQuery 是 对 JavaScript 进行 封装 ， 所 以 执行 速度 并 没有 得 到 优化 ， 相 反 却 影响 了 代码 的 执行 效率 。 因 此 ,在 
可 能 的 情况 下 ， 建 议 混合 使 用 JavaScript 和 jQuery 方法 ， 以 提高 代码 执行 效率 。 | 


72 插入 节点 


jQuery 提供 了 众多 在 文档 中 搬 人 节点 的 方法 ， 极 大 地 方便 了 用 户 操作 。 


7.2.1 内 部 插入 


在 DOM 中 ,使 用 appendChild0 方法 和 insertBefore( 方法 可 以 在 元 素 内 插入 节点 内 容 。 
appendChild0 方法 能 够 把 参数 指定 的 元 床 插 入 到 指定 节点 内 的 尾部 。 用 法 如 下 : 
nodeObject.appendChild(newchild) 


其 中 nodeObject 表示 节点 对 象 ， 参 数 newchild 表示 要 添加 的 子 节点 。 搬 人 成 功 之 后 ,返回 搬 人 节点 。 
【示例 1】 把 一 个 hl 元 素 添加 到 div 元 素 的 后 面 ， 动 态 插 入 的 结构 如 图 7.1 所 示 。 
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| <script> 
| window.onload = function(O { 
| var div = document.getElementsByTagName("div")[0]: 
| var hl = document.createElement("h1"): 
= Pa div.appendChild(h1): 
\ } 

Note | ee 
| <div> 
| <p> 段落 文本 </p> 
| </div> 
| insertBefore0 方法 可 以 在 指定 子 节点 前 面 插入 元 素 。 用 法 如 下 : 
| insertBefore(newchild.refchild) 
| 其 中 参数 newchild 表示 搬 人 新 的 节点 ，rIefchild 表示 在 节点 前 插入 新 节点 。 返 回 新 的 子 节 点 。 
| 【示例 2】 在 div 元 素 的 第 一 个 子 元 素 前 面 插入 一 个 hl 元 素 ， 动 态 插 人 的 结构 如 图 7.2 所 示 。 
<script> 
| window.onload = function(){ 
| Var dv = document.getElementsByTagName("div")[0j; 
| var hl = document.createElement("h1");: 
| Var 0 = div.nsertBefore(hl1.div.firstChild): 
} 
| </script> 
| <p> 段落 文本 </p> 
| </div> 
| < ， < 、 EECEOG | 
段落 文本 
| 文件 (日 查找 [M] 禁用 (】 音 看 (YW】 同人 由 锋 存 (QO) 工具 训 忻 {Fi 前 找 [N】 茜 用 5) 童 看 IV】 图 像 由 问 存 [(C) 工具 
| 浏览 器 模式 :IE10(B) 误导 棋 式 [Mj}: 标 淮 一 [ 品 区 浏览 噩 异 式 : IE10IB) 议和 模式 [M}): 标 准 一 品 其 
HTML | Css 控制 各 膨 丰 探查 器 ”网络 “| 蔓 苇 有 | rw csg 控制 各” 肢 示 。 探 可 嘲 。 网 络 “| 艳 苇 有 
| | 国 - 才 > 
| J 
| 图 7.1 appendChild0 方法 应 用 图 7.2 insertBefore0 方法 应 用 


| jQuery 定义 了 4 个 方法 用 来 在 元 素 内 部 插 和 内容， 说 明 如 表 7.1 所 示 。 

1. append() 

| append0 方法 能 够 把 参数 指定 的 内 容 插 入 指定 的 节点 中 ， 并 返回 一 个 jQuery 对 象 。 指 定 的 内 容 被 插入 
每 个 匹配 元 素 的 最 后 面 ， 作 为 它 的 最 后 一 个 子 元 素 (last child )。 用 法 如 下 : 
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表 7.1 在 节点 内 部 插入 内 容 的 方法 
方法 说 ”有明 
append0 向 每 个 匹配 的 元 素 内 部 追加 内 容 


把 所 有 匹配 的 元 素 追 加 到 另 一 个 指定 的 元 素 集 合 中 。 实 际 上 ， 该 方法 颠倒 Jappend0 的 用 法 。 
例如 ，$(A).append(B) 与 $(B).appendTo(A) 是 等 价 的 


prependO 向 每 个 匹配 的 元 素 内 部 前 置 内 容 


把 所 有 匹配 的 元 素 前 置 到 另 一 个 指定 的 元 素 集 合 中 。 实 际 上 ， 该 方法 颠倒 Jprepend0 的 用 法 。 
例如 ，$(A).prepend (B) 与 $(B). prependTo (A) 是 等 价 的 


appendTo() 


prepend To() 


1. append() 

append0 方法 能 够 把 参数 指定 的 内 容 插 入 到 指定 的 节点 中 ， 并 返回 一 个 jQuery 对 象 。 指 定 的 内 容 被 捅 
入 到 每 个 匹配 元 系 里 面 的 最 后 面 ， 作 为 它 的 最 后 一 个 于 元 素 ( last child )。 用 法 如 下 : | 

append(content) 

append(function(index.,html)) 


参数 content 可 以 是 一 个 元 素 、HTML 字符 串 , 或 者 jQuery 对 象 ， 用 来 插入 每 个 匹配 元 素 的 末尾 。 参 | 


数 function(index,htmD) 是 一 个 返回 HTML 字符 串 的 函数 ， 该 字符 串 用 来 插入 匹配 元 素 的 末尾 。 | 
【示例 3】 调 用 jQuery 的 append0 方法 把 一 个 列表 项 字符 串 添 加 到 当前 列表 的 末尾 ， 演 示 效 果 如 图 7.3 


所 示 。 
<script> 
$(function(){ 
$(".container").append('<l1><1imeg src="Images/3.pne" /></]>"): 
)) 
</script> 
<h2> 浏览 器 图 标 </h2> 


<U]l class="contalmner "> 
<l><1meg src="1mages/l .png" /> 二 /> 
<]><Img sSTc="1mages/2.pPng"” /> 和 </ 汪 > 
UL 


| +] -和 http:jiiocalhost:B080fmysite/test3.htm| ~ 晶 马 | 


图 7.3 在 列表 项 末尾 添加 新 项 


“。 187。 


2 从 入 门 到 精通 ( 微 课 精 编 县) 


| append0 方法 不 仅 接收 HTML 字符 串 ， 还 接收 jQuery 对 象 或 者 DOM 对 象 。 如 条 把 jQuery 对 象 退 加 到 
当前 元 素 尾 部 ， 则 将 删除 原来 位 置 的 jQuery 匹配 对 象 ， 此 操作 相当 于 移动 ， 而 不 是 复制 。 
【示例 4】 调 用 jQuery 的 append0 方法 把 标题 移动 到 列表 结构 的 尾部 ， 显 示 效 果 如 图 7.4 所 示 。 
$(function(){ 

$(".container").append($("h2")): 


}) 


用 -= = 由 -| 是 hp/iocalhostB080/mygsitejtes 如 htm -~ 区 避 = |ocalheast 


图 7.4 ”在 文档 中 移动 元 素 位 轩 


2.append [ol() 


appendTo0 方法 将 匹配 的 元 素 插 入 目标 元 素 的 最 后 面 。 用 法 如 下 : 


appendTlo(target) 
| 参数 target 表示 一 个 选择 符 、 元 素 、HTML 字符 串 或 者 jQuery 对 象 ; 匹配 的 元 素 会 被 插入 由 参数 指定 
的 目标 的 末尾 。 


appendTo() 与 append0 方法 操作 相反 ， 但 是 实现 效果 相同 。 例 如 ， 对 于 下 面 一 行 语句 : 
$(".container").append($("h2")); 


可 以 改写 为 : 
$("h2").appendTo($(".container")): 


| 3. prepend!() 

| prepend0 方法 能 够 把 参数 指定 的 内 容 搬 人 指定 的 节点 中 ， 并 返回 一 个 jQuery 对 象 。 指 定 的 内 容 被 插入 
。 每 个 匹配 元 素 的 最 前 面 ， 作 为 它 的 第 一 个 子 元 素 ( first child )。 用 法 如 下 : 

prepend(content) 

| prepend(function(index,html)) 


| 参数 content 可 以 是 一 个 元 素 、HIML 字符 串 ， 或 者 jQuery 对 象 ， 用 来 插入 到 每 个 匹配 元 素 的 末尾 。 
参数 fnction(index,html) 是 一 个 返回 HTML 字符 串 的 函数 ， 该 字符 串 用 来 插入 到 匹配 元 素 的 末尾 。 
” 【示例 5】 以 示例 4 为 基础 ， 调 用 jQuery 的 prepend0 方法 把 一 个 列表 项 字符 串 添 加 到 当前 列表 的 首位 ， 
演示 效果 如 图 7.5 所 示 。 
$(function(){ 
$(".container").prepend(‘<li><img src="images/3.pnge" /></li>"): 
}) 
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浏览 器 图 标 


图 7.5 在 列表 项 首位 添加 新 项 
另外 ,jQuery 定义 了 prependTo0 方法 ， 该 方法 与 appendTo0 方法 相对 应 ， 即 把 指定 的 jQuery 对 象 包 
含 的 内 容 搬 人 参数 匹配 的 元 素 中 。 


7.2.2 外 部 插入 


DOM 没有 提供 外 部 搬入 的 一 般 方法 ， 如 有 朱 要 实现 在 匹配 元 素 外 面 插 人 或 者 包 庄 元 素 ， 则 需要 间接 方式 
实现 。jQuery 提供 了 多 个 外 部 插入 内 容 的 方法 ,详细 说 明 如 表 7.2 所 示 。 


表 7.2 在 节点 外 部 插入 内 容 


万 法 说 明 

after() 在 每 个 匹配 的 元 素 之 后 插入 内 容 

before() 在 每 个 匹配 的 元 素 之 前 插 人 内 容 

insertAfter() 把 所 有 匹配 的 元 素 插入 另 一 个 指定 的 元 素 集合 的 后 面 

insertBefore() 把 所 有 匹配 的 元 素 插 入 另 一 个 指定 的 元 厅 集 合 的 前 面 
1. after() 
after0 方法 能 够 根据 设置 参数 在 每 个 匹配 的 元 素 之 后 插入 内 容 。 用 法 如 下 
after(content) 
after(function(index)) 


参数 content 表示 一 个 元 素 、HTML 字符 串 ， 或 者 jQuery 对 象 ， 用 来 插 在 每 个 匹配 元 素 的 后 面 。 参 数 
function(index) 表示 一 个 返回 HTML 字符 串 的 函数 ， 这 个 字符 串 会 被 插入 每 个 匹配 元 素 的 后 面 。 
【示例 1】 调用 jQuery 的 after0 方法 在 每 个 列表 项 后 面 添 加 一 行 字 符 串 ， 该 字符 串 是 通过 $("li img"). 
attr("src") 方法 从 列表 结构 中 获取 图 片 中 的 src 属性 值 ， 演 示 效 果 如 图 7.6 所 示 。 
<script> 
$(function() { 
$("11 1me").after($("l 1me").attr("sre")): 
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指定 的 目标 后 面 。 例 如 ， 和 针对 下 面 这 行 代 


演示 效果 


}) 
</script> 
<ul class="contalner "> 
<]><1Img STC= "Images/1.]pg"” /></]> 
<]1>=<1mg STC= "1mages/2.]Dg” /></]> 
</ul> 


2. insertAfter() 方法 
insertAfter() 方法 与 after0 方法 功能 相同 ， 但 用 法 相反 。 用 法 如 下 : 


insertAtter(target) 


参数 target 表示 一 个 选择 右 、 元 素 、HTML 字符 串 或 者 jQuery 对 象 ， 匹 配 的 元 素 将 会 被 插入 到 由 参数 
马 : 


$("]iimg").after($("<span> 注释 文本 </span>")); 
则 可 以 改写 为 : 
$("<span> 注释 文本 </span>").insertAfter($("li img")); 


3. before() 
before0 方法 为 每 个 匹配 的 元 素 之 前 插入 内 容 。 用 法 如 下 : 


before (content) 
before (function(index)) 


参数 content 表示 一 个 元 素 、HIML 字符 串 ， 或 者 jQuery 对 象 ， 用 来 插 在 每 个 匹配 元 素 的 前 面 。 参 数 


function(index) 表示 一 个 返回 HTML 字符 串 的 函数 ， 这 个 字符 串 会 被 插入 到 每 个 匹配 元 素 的 前 面 。 


【示例 2】 以 示例 1 为 基础 ， 调 用 jQuery 的 before0 方法 在 每 个 列表 项 前 面 添加 图 片 中 的 src 字符 串 信息 ， 
如 图 7.7 所 示 。 


$(function(){ 
$("li imge").before($("li ime").attr("srce")); 


)) 
4. insertBefore() 方法 
insertBefore0 方法 与 before( 方法 功能 相同 ， 操 作 相 反 。 用 法 如 下 : 


insertBefore(target) 
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图 7.7 在 列表 项 前 面 添加 注释 行文 本 
参数 target 表示 一 个 选择 磊 、 元 素 、HTML 字符 串 或 者 jQuery 对 象 ， 匹 配 的 元 素 将 会 被 
指定 的 目标 前 面 。 例 如 ， 针 对 下 面 这 行 代 码 : 
$("li img").brfore($("<span> 注释 文本 </span>")); 
则 可 以 改写 为 : 
$("<span> 注释 文本 </span>").beforetAfter($("li img")): 


有 入 在 由 参数 


nl 


六 提示 : appendTo(0、prependTo()、insertBefore() 和 insertAfter() 方法 具有 破坏 性 操作 特性 。 也 就 是 说 ， 
如 果 选 择 已 存在 内 容 ， 并 把 它们 插入 指定 对 象 中 时 ， 原 位 置 的 内 容 将 被 删除 。 


73 删除 节点 


使 用 DOM 的 removeChild0 方法 可 以 删除 指定 的 节点 及 其 包含 的 所 有 子 节 点 ， 并 返回 这 些 删除 的 内 容 。 


nodeObject.removeChild(node) 


中 nodeObject 表示 父 节 点 对 象 ， 参 数 node 表示 要 删除 的 子 节点 。 
【示例 】 先 使 用 documentgetElementsByTagNameg0 方法 获取 页 面 中 的 div 和 Dp 元 素 ， 然 后 移出 p 元 素 ， 
把 移出 的 p 元 素 附加 到 div 元 素 后 面 。 


<script> 

window.onload = function(){ 
var dv = document.getElementsByITaeName("div" )|0|: 
varp = document.getElementsByITaeName("p")|0|: 
var pl = div.removeChild(p): 
div.parentNode.nsertBefore(pl.,div.nextSibling): 


) 
</script> 
<div> 
<p> 段落 文本 </p> 
</div> 
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由 于 DOM 的 insertBefore0 与 appendChild0 方法 都 具有 破坏 性 ， 当 使 用 文档 中 现 有 元 素 进 行 操 作 时 ， 


会 先 删除 原 位 置 上 的 元 素 。 因 此 对 于 下 面 两 行 代 公 : 


var pl = div.removeChild(p): // 移出 Dp 元素 
div.parentNode.insertBefore(p1,div.nextSibline): // 把 移出 的 p 元 素 附 加 到 div 元 素 后 面 
可 以 合并 为 : 


divparentNode.insertBefore(p.divnextSibling): // 直接 使 用 insertBefore0 移动 p 元 素 


jQuery 定义 了 3 个 删除 内 容 的 方法 : remove0 、empty0 和 detach0。 其 中 Temove0 方法 对 应 DOM 的 


removeChild0 方法 ， 详 细 说 明 如 表 7.3 所 示 。 


表 7.3 jQuery 删除 内 容 的 方法 


方 法 说 了 明 

Temoveg 从 DOM 中 删除 所 有 匹配 的 元 素 
empty0) 删除 匹配 的 元 素 集合 中 所 有 的 子 节点 
detach() 从 DOM 中 删除 所 有 匹配 的 元 素 


7.3.1 移出 


切 ， 


remove() 方法 能 够 将 匹配 元 素 从 DOM 中 删除 。 用 法 如 下 : 

remove( | selector | ) 

参数 selector 表示 一 个 选择 表达 式 用 来 过 滤 匹 配 的 将 被 移出 的 元 素 。 该 方法 还 将 同时 移出 元 素 内 部 的 一 
包括 绑 定 的 事件 及 与 该 元 素 相关 的 jQuery 数据 。 

【示例 1】 为 <button> 标签 绑 定 click 事件 ， 当 用 户 单 击 按钮 时 将 调用 jQuery 的 remove0 方法 移出 所 有 


的 段落 文本 ， 演 示 效 果 如 图 7.8 所 示 。 


<script> 

$(fimction() { 
$("button").click(function O { 

$("p").remove(): 

}); 

入 

</script> 

<p> 段落 文本 1</p> 

<div> 布局 文本 </div> 

<p> 段落 文本 2</p> 

<button> 清除 段落 文本 </button> 


宇 提示 : 由 于 removeg0 方法 能 够 删除 匹配 的 元 素 ， 并 返回 这 个 被 删除 的 元 素 ， 因 此 在 特定 条 件 下 该 方法 


的 功能 可 以 使 用 jQuery 的 appendTo()、 prependTo()、insertBefore(0 或 insertAfter0 方法 进行 模拟 。 
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| [] -| 加 http:i/localho... ~ 昌 地 
息 猪 区 本 1 
市 局 Ww 本 | 
段 笠 文本 2 


清除 段落 交 本 


7.8 单 击 移出 段落 文本 


【示例 2】 先 将 父 元 素 div 的 子 元 素 p 移出 ， 然 后 搬 人 到 父 元 素 div 的 后 面 ， 执 行 之 后 的 HTML 结构 如 
图 7.9 所 示 。 


<script> 
$(functionO{ | 
Var $p = $("p").remove(); | 
$p.insertAfter("div"); | 
}) 
</script> 
<div> 
<p> 段落 文本 </p> 
</div> | 


臣 涪 本 | 

文件 (F， 查找 [N) 禁用 (S) 查看 (V) 图 像 四 摆 存 必 ) 工具 (TD 验证 (内 | 

ee i 

HTML | Css 控制 各” 脑 本 ”过 可 器 。 网络 
必用 | | 

全 展 园 笑 国 国 园 EE= 品 跌 样式 布局。 尾 性 


DOCTYEE html FUBLIC “> 


图 7.9 使 用 jQuery 移动 HTML 结构 
如 果 使 用 insertAfterO 方法 ， 则 可 以 把 上 面 的 两 步 操 作 合 并 为 一 步 ， 代 但 如 下 : 


<script> | 
$(function() { | 

$("p")-insertAfter("div"); // 直接 把 段落 文本 移动 到 div 元 素 后 面 
7) | 
</script> | 
不 过 remove( 方法 的 主要 功能 是 删除 指定 节点 以 及 包含 的 于 节点 。 | 
【源码 解析 】 | 


jQuery 通过 jQuery.fn.extend({}) 方式 添加 了 remove0 方法 ,源码 如 下 : 
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remove: function (selector) {// 从 DOM 中 删除 所 有 匹配 的 元 素 


return remove(this, selector); 


} 
在 上 面 代 码 中 ,调用 了 jQuery 的 一 个 私有 肯 数 remove0 来 处 理 节 点 移出 操作 ,源码 如 下 : 
// 从 DOM 中 删除 所 有 匹配 的 元 素 
// 参数 说 明 : 
//elem: jQuery 对 象 
//selector: 用 于 筛选 元 素 的 jQuery 表达 式 
//keepData: 是 否 保存 属性 信息 
function remove(elem, selector, keepData) { 
Var node. 
1/ 如果 存在 CSS 表达 式 ， 则 调用 jQueryfilter0 过 滤 DOM 元 素 集合 ， 如 果 不 存 在 ， 则 直接 操作 所 有 DOM 元 素 
nodes = selector ? JQuery.filter(selector, elem) : elem, 
1= 0: 
for (: 1// 使 用 for 达 代 所 有 DOM 元 素 
(node = nodes[1|) {= null:; I++) { 
if(!keepData && node.nodeType 一 一 1) { // 如 果 不 保 留 附加 属性 信息 
jQuery.cleanData(getAll(node)); 。。/W 则 清除 节点 的 附加 信息 
} 
if (node.parentNode) { // 如 果 存 在 父 节 点 
if (keepData && jQuery.contains(node.ownerDocument, node)) {// 如 果 保 留 附 加 属性 信息 ， 且 位 于 当前 
1 文档 节 太 下 
setGlobalEval(getAll(node, "script")); // 设置 script 属性 
} 
node.parentNode.removeChild(node): / 移出 节点 
} 
} 
return elem: /返回 jQuery 对 象 ， 保 证 链 式 语法 连贯 
} 


empty0 方法 可 以 清空 元 素 包 含 的 内 容 。 在 用 法 上 ，empty0 方法 和 remove0 方法 相似 ， 但 是 执行 结果 
略 有 区 别 。 用 法 如 下 : 


empty() 


该 方法 没有 参数 ， 表 示 将 直接 删除 匹配 元 素 包 含 的 所 有 内 容 。 
【示例 】 为 <button> 标签 绑 定 click 事件 ， 当 用 户 单 击 按钮 时 将 调用 jQuery 的 empty0 方法 清空 段落 文 
本 内 的 所 有 内 容 ， 但 没有 删除 p 元 素 。 

<SCIIpt> 
$(function() { 

$("button").click(function ( { 

$("p").empty0: 

}); 

}) 


。194 。 


</script> 

<p> 段落 文本 1</p> 

<div> 布局 文本 </div> 

<p> 段落 文本 2</p> 

<button> 清除 段落 文本 </button> 


六 提示 : 移出 和 清空 是 两 个 不 同 的 操作 概念 ， 移 出 将 删除 指定 的 jQuery 对 象 所 匹配 的 所 有 元 素 ， 以 及 其 
包含 的 所 有 内 容 ， 而 清空 仅 删除 指定 的 jQuery 对 象 所 匹配 的 所 有 元 素 和 包含 的 内 容 ， 但 是 不 删除 
当前 匹配 元 素 。 


另外 ，remove0 方法 能 够 根据 传递 的 参数 进行 有 选择 的 移出 操作 ， 而 empty0 方法 将 对 所 有 匹配 的 元 素 
执行 清空 操作 ， 没 有 可 以 选择 的 参数 。 

【源码 解析 】 

jQuery 通过 jQuery fn.extend({)) 方式 添加 了 empty0 方法 ， 源 码 如 下 : 

/ 删除 匹配 元 素 集合 中 的 所 有 子 节点 

empty: function () { 


Var elem, 
1=O: 
for (: 1/ 如 果 节 点 存在 
(elem =this[i]) {= null: i++) { 
if (elem.nodeType —= 1) { // 如 果 是 元 素 节点 
// 防止 内 存 泄露 
jQuery.cleanData(getAll(elem. false)); // 清除 所 有 属性 信息 
/删除 任何 剩余 的 节点 
elem.textContent = "™": 
和 
} 
return this: /返回 jQuery 
} 
7.3.3 ”分离 
detach0( 方法 能 够 将 匹配 元 素 从 DOM 中 分 离 出 来 。 用 法 如 下 : | 
detach([expr]) | 


参数 expr 是 一 个 选择 表达 式 ， 将 需要 移出 的 元 素 从 匹配 的 元 素 中 过 滤 出 来 。 该 参数 可 以 省 略 ， 如 果 省 
略 则 将 移出 所 有 匹配 的 元 素 。 | 
【示例 1】 为 <button> 标签 绑 定 click 事件 ， 当 用 户 单 击 按钮 时 将 调用 jQuery 的 detch0 方法 分 离 段落 文 
本 ， 演 示 效 果 如 图 7.10 所 示 。 | 
<script> | 
$(functionO{ 
$("p").click(functionO{ 
$(this).togeleClass("olf"): 
}); 
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Var D: 
$("button").click(function(O) { 
ICP) 
p-appendTo("body"); 
p= mll: 
+ else { 
p= $3("p").detachO; 
} 
DE 
1) 
</script> 
<p> 段落 文本 1</p> 
<div> 布局 文本 </div> 
<p> 段落 文本 2</p> 
<button> 分 离 段 落 文本 </button> 


状 
息 落 文本 1 
市 局 这 本 


丘 浅 交 本 2 


图 7.10 分 离 段 落 文 本 


在 上 面 示 例 中 ， 文 档 中 包含 两 段 文本 ， 通 过 $("p").click0 方法 为 段落 文本 绑 定 一 个 单 击 事件 ， 即 单 击 
段落 文本 时 ， 将 设置 或 者 移出 样式 类 off， 这 样 p 元 素 就 拥有 了 一 个 事件 属性 ， 单 击 段落 文本 可 以 切换 off 
样式 类 。 在 内 部 样式 表 中 ， 定 义 段 落 文本 默认 背景 色 为 浅黄 色 ， 单 击 后 应 用 o 企 样式 类 ， 人 恢复 默认 的 白色 背 
景 ， 通 过 toggleClass0 类 切换 方法 实现 再 次 单 击 段落 文本 后 将 再 次 显示 浅黄 色 背 景 。 

然后 在 按钮 的 click 事件 处 理 函 数 中 ， 将 根据 一 个 临时 变量 p 的 值 来 判断 是 否 分 离 文 档 中 的 段落 文本 ， 
或 者 把 分 离 的 段落 文本 重新 附加 到 文档 尾部 。 此 时 ， 会 发 现 当 再 次 恢复 被 删除 的 段落 文本 时 ， 它 依然 保留 
着 上 面 定义 的 事件 属性 。 


< 角 注意 ; 与 remove0 方法 不 同 的 是 ，detach0 方法 能 够 保存 所 有 jQuery 数据 与 被 移 走 的 元 素 相 关联 ， 所 
有 绑 定 在 元 素 上 的 事件 、 附 加 的 数据 等 都 会 保留 下 来 。 当 需要 移 走 一 个 元 素 ， 不 久 又 将 该 元 素 
插入 DOM 时 ， 这 种 方法 很 有 用 。 


【示例 2】 以 示例 1 为 例 ， 如 果 使 用 remove0 方法 代 蔡 detach0 方法 ， 则 当 再 次 恢复 被 删除 的 段落 文本 
时 ， 段 落 文本 的 click 事件 属性 将 失效 ， 主 要 代码 如 下 : 
$(function(){ 
$("p").click(function(){ 
$(this).togeleClass("off"): 
)): 
var Pp: 
$("button").click(function(O) { 
(pp)t 
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p-appendTo("body"): 
p= null; 

} else { 
p= $("p").remove(): 


}); 
}) 
【源码 解析 】 


jQuery 通过 jQuery.ftn.extend({}) 方式 添加 了 detach0 方法 ,源码 如 下 : 
detach: function (selector) { 
return remove(this, selector, true): 


} 
调用 remove0 方法 ， 设 置 第 3 个 参数 为 tue， 保 留 属 性 信息 。 


74 克隆 节点 


在 DOM 操作 过 程 中 ， 如 果 直 接 使 用 节点 会 出 现 节点 随 操作 而 变动 的 情况 。 比 如 ， 对 节点 使 用 
.after/.before/.append 等 方法 后 ， 节 点 被 添加 到 新 的 地 方 ， 原 来 位 置 上 的 节点 被 移出 了 。 有 时 需要 保留 原来 
位 置 上 的 节点 ， 仅 仅 需要 一 个 副本 添加 到 对 应 位 置 ， 这 时 克隆 就 有 了 使 用 场景 。 

jQuery fn.clone 克隆 当前 匹配 元 素 集合 的 一 个 副本 ， 并 以 jQuery 对 象 的 形式 返回 。 

还 可 以 指定 是 否 复 制 这 些 匹配 元 素 ( 甚至 它们 的 子 元 素 ) 的 附加 数据 ( data0 函数 ) 和 绑 定 事件 。 


7.4.1 使 用 clone() 


使 用 DOM 的 cloneNode0 方法 可 以 元 隆 节点 。 用 法 如 下 : 
nodeObject.cloneNode(Include all) 


参数 include all 为 布尔 值 ， 如 果 为 tue， 那 么 将 会 克隆 原 节 点 ， 以 及 所 有 子 节 点 ; 如 果 为 false， 则 仅 
复制 节点 本 身 。 复 制 后 返回 的 节点 副本 属于 文档 所 有 ,但 并 没有 为 它 指定 父 节 点 ， 需 要 通过 appendChildO、 ， 
insertBefore( 或 replaceChild0 方法 将 它 添 加 到 文档 中 。 | 

【示例 】 使 用 cloneNode0 方法 复制 div 元 素 及 其 所 有 属性 和 子 节 点 ， 当 单 击 段落 文本 时 ， 将 复制 段落 文 
本 ， 并 追加 到 文档 的 尾部 。 

<=script> 

window.onload = function(){ 

var dv = document.getElementsByTageName("div")[0]|: 
div.onclick = functionO 
var dvl = div.cloneNode(true): 
div.parentNode.msertBefore(div],div.nextSibling): 
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</script> 

<dv class="red" title="no" ondblclick—"alert('ok')"=> 
| <p> 段落 文本 </p> 
| </div> 


< 负 注意 : 复制 的 div 元 素 不 拥有 事件 处 理 函 数 ， 但 是 拥有 div 标签 包含 的 事件 属性 。 如 果 为 clone0 方法 
] 传递 true 参 数 ， 则 可 以 使 复制 的 div 元 素 也 拥有 单 击 事件 。 也 就 是 说 ， 当 单 击 复制 的 div 元 素 时 ， 
| 会 继续 进行 复制 操作 ， 连 续 单 击 会 使 复制 的 div 元 素 成 倍增 加 。 


jQuery 使 用 clone0 方法 复制 节点 ， 用 法 如 下 : 
clone([Even|,deepEven||) 


加 Even: 一 个 布尔 值 (true 或 者 false )， 设 置 事件 人 处理 函数 是 否 会 被 复制 。 默 认 值 是 false。 
对 ”deepEven: 一 个 布尔 值 ， 设 置 是 否 对 事件 处 理 程序 和 克隆 的 元 率 的 所 有 子 元 素 的 数据 应 该 被 复制 。 
默认 值 是 false。 
【示例 2】 通 过 clone(true) 方法 复制 <b> 标签 ， 并 把 它 复制 到 <p> 标签 的 后 面 ， 同 时 保留 该 标签 默认 的 
事件 处 理 图 数 ， 演 示 效 果 如 图 7.11 所 示 。 
<script> 
$(function() { 
$("b").click(function() { 
$(this).togeleClass("off'): 
by 
$("b").clone(true).insertAfter("p"); 
}) 
</script> 
<b> 加 粗 文本 </b> 
<p> 段落 文本 </p> 


a 


Ee 到 ke http:/flocalho- > 前 局 | 起 localhost 


图 7.11 克隆 内 容 


“7.4.2 源码 解析 


jQuery 通过 jQuery.fn.extend({}) 方式 添加 了 clone0 方法 ,源码 如 下 : 


/ 克隆 匹配 的 DOM 元 泰 并 且 选 中 这 些 克 隆 的 副本 
// 参数 说 明 如 下 : 
//dataAndEvents: 一 个 布尔 值 (true 或 者 false )， 设 置 事件 处 理 困 数 是 否 会 被 复制 。 默 认 值 是 false 
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//deepDataAndEvents: 一 个 布尔 值 ， 设 置 是 否 对 事件 处 理 程 序 和 克隆 的 元 素 的 所 有 子 元 素 的 数据 应 该 被 复制 。 默 
// 认 值 是 false 
clone: tunction (dataAndEvents, deepDataAndEvents) { 
/初始 化 参数 值 
dataAndEvents = dataAndEvents — nmull ? false : dataAndEvents: 
deepDataAndEvents = deepDataAndEvents — null ? dataAndEvents : deepDataAndEvents: 
1/ 映射 jQuery 中 的 所 有 元 素 ， 并 调用 jQueryclone0 工具 函数 对 每 个 元 素 执行 克隆 操作 
return this.map(function () { 
return jQuery.clone(this, dataAndEvents, deepDataAndEvents):/ 克隆 节点 


}); 
) 


下 面 再 来 解析 一 下 jQuery.clone0 工具 图 数 ，jQuery 通过 jQuery.extend0 方法 直接 把 clone0 方法 挂 在 | 
jQuery 类 对 象 上 ,源码 如 下 : / 


// 参数 说 明 如 下 : 
//elem: 被 克隆 的 元 素 
//dataAndEvents: 是 否 复 制 附加 数据 和 事件 属性 
/deepDataAndEvents: 是 否 深度 克隆 
clone: function (elem, dataAndEvents, deepDataAndEvents) { 
Var 1, 1, srcElements., destElements., 
// 先 克 隆 出 DOM 节点 。 对 支持 正确 的 节点 克隆 ( 即 支 持 elem.cloneNode 并 保证 克隆 无 误 ) 的 DOM 节点 
// 直接 使 用 cloneNode ( true )， 否 则 自 建 一 个 节点 来 保存 被 克隆 数据 后 获取 该 节点 
clone = elem.cloneNode(true), 
mPage = JQuery.contans(elem.ownerDocument, elem): 
// 修复 正 克隆 问题 
/TE 8- 不 能 正确 克隆 已 分 离 、 未 知 的 节点 
// 直接 新 建 一 个 相同 的 节点 ， 然 后 获取 
// 检查 复制 checkbox 时 是 否 连 选中 状态 也 一 同 复制 ， 知 复制 则 为 false， 否 则 为 tue 
/ 确定 是 元 素 或 文档 片段 节点 ， 不 是 XML 文档 
1 (!support.noCloneChecked && (elem.nodeType —= 1 || elem.nodeType —= 11) KK 
ljQuery.isXMLDoc(elem)) { 1/ 针对 正 克隆 问题 修正 
// 在 这 里 不 使 用 Sizzle 的 原因 请 参考 网 址 为 http://jsperf.com/getall-vs-sizzle/2 上 的 内 容 
destElements = getAll(clone): 
srcElements = getAll(elem): 
for (i= 0,1= srcElements.length: i<1:it+) {// 修 正 所 有 正 克隆 问题 
// 如 果 是 正 浏 览 嚣 下， 则 需要 通过 “fixInput(srcElements[i], destElements[ 让 ):" 来 逐个 修正 正 克隆 
//IE 克隆 解决 方案 全 部 包含 在 fixInput0 中 
fixInput(srcElements[1|. destElements|1|): 


问题 。 


} 


} 
// 如 果 要 克隆 缓存 数据 ( 包括 普通 数据 和 绑 定 事件 )， 则 克隆 绑 定 的 事件 
1 (dataAndEvents) { 
if (deepDataAndEvents) { 1/ 如 果 是 深度 克隆 ， 则 进 代 所 有 后 代 元 素 
srcElements = srcElements || getAll(elem): 
destElements = destElements || getAll(clone): 
for (1= 0,1= srcElements.length: 1<]:1+)t{ 
//cloneCopyEvent 了 数 会 将 厚 节点 的 数据 保存 到 克隆 节点 中 
1/ 然后 将 原 节 点 的 事件 绑 定 到 新 的 克隆 节点 上 
cloneCopyEvent(srcElements|1|, destElements[1)|); 
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| 
| } else { / 否则 仅 克 隆 当 前 元 素 
| cloneCopyEvent(elem. clone): 
| } 
全 凑 晶 } 
/ / 保护 script 计算 历史 (全 局 性 地 标记 scripts 代码 段 已 经 被 执行 过 了 )， 并 回收 内 存 ， 返 回 克 隆 节点 
Note _ ee 
| stElements = getAll(clone, "script"); 


| if (destElements.length > 0) { 
| setGlobalEval(destElements, !inPage && getAll(elem, "script")): 
| 

return clone: /返回 克隆 的 集合 


7.5 替换 节点 


使 用 DOM 的 replaceChild0 方法 可 以 替换 节点 。 用 法 如 下 : 
| nodeObject.replaceChild(new node,old node) 
其 中 参数 new_node 为 指定 新 的 节点 , old_node 为 被 硝 换 的 节点 。 如 果 蕉 换 成 功 ， 则 返回 被 蔡 换 的 节点; 


| 如 果 蔡 换 失 败 ， 则 返回 pull。 
| 【示例 1】 使 用 document.createElement("div") 方法 创建 一 个 div 元 素 ， 然 后 在 循环 结构 体内 逐一 使 用 克 
| 


隆 的 div 元 素 蔡 换 段 落 文本 内 容 ， 演 示 殖 果 如 图 7.12 所 示 。 


<script> 
window.onload = function(){ 
var p = document.getElementsByTaeName("p"); 
var div = document.createElement("d1v"): 
| div.innerHTML = "盒子 ": 
for(var i=0.,1 = p.length:i< 1:i++){ 
var dvl = div.cloneNode(true); 
p[0l].parentNode.replaceChild(div1.,p[01|): 


上 

</script> 

| <p> 段落 1</p> 
<p> 段落 2</p> 
<p> 段落 3</p> 


/ 图 7.12 替换 段落 文本 节点 
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jQuery 定义 了 了 replaceWithO 和 replaceAll0 方法 用 来 蔡 换 节 点 。 
replaceWith0 方法 能 够 将 所 有 匹配 的 元 素 蔡 换 成 指定 的 HIML 或 DOM 元 素 。 用 法 如 下 : 


replaceWith(newContent) 
replaceWith(function) 


参数 newContent 表示 插入 的 内 容 ， 可 以 是 HTML 字符 串 、DOM 元 素 , 或 者 jQuery 对 象 。 

参数 function 返回 HIML 字符 串 ， 用 来 其 换 的 内 容 。 

【示例 2】 为 按钮 绑 定 click 事件 处 理 函 数 ， 当 单 击 按钮 时 将 调用 replaceWith() 方法 把 当前 按钮 替换 为 
div 元 素 ， 并 把 按钮 显示 的 文本 装 人 div 元 素 中 ， 效 果 如 图 7.13 所 示 。 

<script> 

$(functionOf 

$("button").click(function () { 
$(this).replace With("<div>" + $(this).textO + "</div>"); 


}); 
bn 
</script> 
<button> 按钮 1</button= 
<button> 按钮 2</button> 
<button> 按钮 3</button= 


3 


埠 |ocalhost 


图 7.13 替换 按钮 


演 提示 : replaceWith() 方法 将 会 用 选中 的 元 素 替 换 目 标 元 素 ， 此 操作 是 移动 ， 而 不 是 复制 。 与 大 部 分 其 
他 jQuery 方法 一 样 ，replaceWith( 方法 返回 jQuery 对 人 象 ， 所 以 可 以 通过 链 式 语法 与 其 他 方法 链 
接 使 用 。 需 要 注意 的 是 ，replaceWith0 方法 返回 的 jQuery 对 象 是 与 被 移出 的 元 素 相 关联 的 ， 而 
不 是 新 插入 的 元 素 。 


replaceAll0 方法 能 够 用 匹配 的 元 素 替 换 掉 所 有 指定 参数 匹配 到 的 元 素 。 用 法 如 下 : 
replaceAll(selector) 


参数 selector 表示 jQuery 选择 天 字 符 串 ， 用 于 查找 被 蔡 换 的 元 素 。 

replaceAll0 方法 与 replaceWith0O 方 法 的 实现 结果 是 一 致 的 ， 但 是 操作 方式 相反 ， 类 似 于 $AreplaceAll($B) | 
A $B.replaceWith($A)。 

【示例 3】 使 用 replaceAll0 方法 蔡 换 示例 2 中 的 replacecWith0 方法 ， 所 实现 的 结果 都 是 一 样 的 。 即 为 | 
按钮 绑 定 click 事件 处 理沙 数 ， 当 单 击 按钮 时 调用 replaceAll0 方法 把 当前 按钮 蔡 换 为 div 元 素 ， 并 把 按钮 显 | 
示 的 文本 装 入 div 元 素 中 。 | 

$(fimctionO! | 
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$("button").click(function ( { 
$"<div>" + $(this).textO + "</div>").replaceAll(this): 


7.6 包 豪 元 素 


/ DOM 没有 提供 包 庄 元 素 的 方法 ，jQuery 定义 了 3 种 包 里 元 素 的 方法 : wrap0、wrapInnerO 和 wrapAll0。 
这 些 方 法 的 区 别 主要 在 于 包 正 的 形式 不 同 ， 下 面 分 别 进行 介绍 。 


“7.6.1 外 包 


wrap0 方法 能 够 在 每 个 匹配 的 元 素 外 层 包 上 一 个 HTML 元 素 。 用 法 如 下 : 


wrap(wrappineElement) 
wrap(wrappineFunction) 
| 参数 wrappingElement 表示 HTML 片段 、 选 择 表达 式 、jQuery 对 象 ， 或 者 DOM 元 率 ， 用 来 包 在 匹配 


”元 素 的 外 层 。 
| 参数 wrappingFunction 表示 一 个 用 来 包 玩 元 素 的 回调 函数 。 
【示例 1】 为 每 个 匹配 的 <a> 标签 使 用 wrap0 方法 包 于 一 个 <li> 标签 ， 为 了 方便 观察 ， 在 文档 头 部 定义 
一 个 内 部 样式 表 ， 定 义工 元 素 显 示 红 色 边 框 样式 ， 效 果 如 图 7.14 所 示 。 


<script> 

$(function() { 
$("a").wrap("<li></i>"); 

月 

</script> 

<a href="#"> 首页 </a> 

<a hre 伍 "#"> 社区 </a> 

<a href="#"> 新 闻 </a> 


图 7.14 ”为 超 链接 包 右 项 目 列表 


党 提示 : wrap0 方法 的 参数 可 以 是 字符 串 或 者 对 象 ， 只 要 该 参数 能 够 生成 DOM 结构 即 可 ， 且 jQuery 对 
许 参 数 可 以 是 谋 套 的 ， 但 是 结构 只 包含 一 个 最 里 层 元 素 ， 这 个 结构 会 包 在 每 个 匹配 元 素 外 层 。 
Wrap() 方法 返回 没 被 包 庄 过 的 元 素 的 jQuery 对 象 用 来 链接 其 他 函数 。 


* 202。 


第 7 章 操作 DOM 


【示例 2】 针 对 示例 1， 使 用 下 面 代码 为 每 个 超 链 接 包 里 DOM 结构 。 


$(function() { 
$("a").wrap("<ul><li></i></ul>"): 
a 


在 内 部 样式 表 中 添加 ul{border:solid 2px blue;} 样式 ， 在 浏览 句 中 的 效 末 如 图 7.15 所 示 。 


用 


7.6.2 内包 


图 7.15 为 超 链接 包 于 多 层 的 结构 


wrapInner() 方法 能 够 在 匹配 元 素 的 内 容 外 包 庄 一 层 结构 。 用 法 如 下 : 


wrapInner(wrappineElement) 
wrapInner (wrappineFunction) 


参数 wrappingElement 表示 HTML 片段 、 选 择 表达 式 、jQuery 对 象 ， 或 者 DOM 元 系 ， 用 来 包 在 匹配 


元 素 内 的 内 容 外 层 。 


参数 wrappingFunction 表示 一 个 用 来 包 里 元 素 的 回调 函数 。 


【示例 1】 先 为 每 个 匹配 的 <a> 标签 使 用 wrap0 方法 包 于 
wrapInner() 方法 为 所 有 列表 项 包 右 一 个 岂 元 素 


。 为 了 方便 观察 ， 在 文档 头 部 定义 一 个 内 部 样式 表 ， 和 定义 1 


元 素 显示 红色 边框 样式 ， 同 时 定义 中 元素 显示 为 蓝 色 粗 边框 线 ， 演 示 效 果 如 图 7.16 所 示 。 


<script> 

$(function() { 
$("a").wrap("<li></1>"); 
$("body").wrapInner("<ul></ul>"):; 

州 

</script> 

<a href="#"> 首页 </a> 

<a hre 伍 #"> 社区 </a> 

<a hre 伍 "#"> 新 闻 </a> 


类 = 


3 时 -| 过 httpyWlecalho- ~ 信心 生 localhest x | 


图 7.16 为 网 页 内 容 包 于 列 表 框 
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列表 项 包 庄 一 个 UL 元素 。 为 了 方便 观察 ， 在 文档 头 部 定义 一 个 内 部 样式 表 
同时 定义 元 素 显 示 为 蓝 色 ; 


六 提示 : 与 wrap() 方法 一 样 ，wrapInner( 方法 的 参数 可 以 是 字符 串 或 者 对 象 ， 只 要 该 参数 能 够 形成 


DOM 结构 即 可 ， 且 jQuery 允许 参数 可 以 是 误 套 的 ， 但 是 结构 只 包含 一 个 最 里 层 元 素 。 这 个 结 
构 会 包 在 每 个 匹配 元 素 外 层 。wiapInner0 方法 返回 没 被 包裹 过 的 元 素 的 jQuery 对 象 用 来 链接 其 
他 函数 。 

【示例 2】 针 对 示例 1， 把 其 中 的 代码 行 : 

$("body").wrapInner("<ul></ul>"): 


I 
Tt 


i 换 为 : 


* 
= 


$("body").wrapInner("<div><div><ul></l></div></div>"); 


然后 在 内 部 样式 表 中 添加 div{border:solid 1px gray: padding:5px:} 样式 ， 在 浏览 器 中 预览 演示 效果 ， 如 


图 7.17 所 示 。 


Se (+) | http://localhost:8080/m ~ @ © | @ localhost 


fi6.3 喜 


wrapAll0 方法 能 够 在 所 有 匹配 元 
wrapAll(wrappingElement) 


参数 wrappingElement 表示 包 在 外 面 的 HTML 片段 、 表 达 式 、jQuery 对 象 或 者 DOM 元 素 。 
【示例 】 先 为 每 个 匹配 的 <a> 标签 使 用 wrap0 方法 包 于 一 个 <li> 标签 ， 然 后 使 用 wrapAll0 方法 为 所 有 


得 边框 线 ， 动 态 结构 如 图 7.18 所 示 。 


<script> 

$(function(){ 
$("a").wrap("<li></1>"); 
$("11").wrapAll"<ul></0l>"): 

月 

</script> 

<a hre 伍 #"> 首页 </a> 

<a href="#"> 社区 </a> 

<a hre 伍 "#"> 新 闻 </a> 
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图 7.18 ”为 列表 项 包 庄 一 个 列表 结构 


本 示例 演示 效果 与 7.6.2 节 示 例 效 果 一 样 ， 虽然 两 个 示例 使 用 的 方法 不 同 ,但 是 结 采 一 怪 。 也 束 是 说 ， 
“$("1").wrapAll(<ul></l>");” 等 效 于 “S$("body").wrapInner("<ul></ul>");”。 


7.6.4” 凶 包 


unwrap0 方法 与 wrap0 方法 的 功能 相反 ， 能 够 将 匹配 元 率 的 父 级 元 素 删 除 ， 保 留 目 身 在 原来 的 位 置 。 
用 法 如 下 : 


unwrap O 
该 方法 没有 参数 。 


【示例 】 为 按钮 绑 定 一 个 开关 事件 ， 当 单 击 按钮 时 可 以 为 <a> 标签 包 里 或 者 凶 包 <li> 标签， 在 浏览 右 中 
预览 效果 ， 如 图 7.19 所 示 。 
<scrlipt> 
$(function(){ 
Var 1= 0, $a =$("a"); 
$("button").click(function(O){ 


(10) 
$a.wrap("<li></i>"): 
' 三 
+telset 
$a.unwrap(); 
1—0: 
b 
9 
}) 
</script> 


<a href="#"> 首页 </a> 
<a href—"#"> 社区 </a> 
<a hre 伍 "#"> 新闻 </a> 
<button> 包装 /名和 包 </button> 


C= +] 各 hup:jilocalho.. ”昌吉 | 旦 


7.19 ” 包 于 或 者 秃 包 <a> 标签 
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7.7 操作 属性 
jQuery 和 DOM 都 提供 了 属性 的 基本 操作 方法 。 属 性 操作 包括 设置 属性 、 访 问 属性 、 删 除 属性 等 。 


7.7.1 设置 属性 


在 DOM 中 使 用 setAttributeO 方法 可 以 设置 元 素 属性 。 用 法 如 下 : 


elementNode.setAttribute(name,value) 


其 中 elementNode 表示 元 素 节 点 ; 人 参数 name 表示 en 隆 名 ，value 表示 要 设置 的 属性 值 。 
【示例 1】 为 页 面 中 的 段落 标签 <p> 定义 一 个 title 属性 ， 设置 属性 值 为 “段落 文本 ”。 


<script> 

window.onload = function(){ 
varp = document.getElementsByTaeName("p")[0|: 
p.setAttribute("title"," 段落 文本 "): 

} 

</script> 

<p> 段落 文本 </p> 


jQuery 定义 了 两 个 用 来 设置 属性 值 的 方法 : propO0 和 attr0。 


1. prop() 
prop0 方法 能 够 为 匹配 的 元 素 设 置 一 个 或 更 多 的 属性 。 用 法 如 下 : 


prop(propertyName, value) 
prop(map) 
prop(propertyName, function(index, oldProperty Value)) 


参数 propertyName 表示 要 设置 的 属性 的 名 称 ; value 表示 一 个 值 ， 用 来 设置 属性 值 。 如 果 为 元 素 设置 多 
个 属性 值 ， 可 以 使 用 map 参数 ， 该 参数 是 一 个 用 于 设置 属性 的 对 象 ， 以 { 属性 : 值 } 对 形式 进行 定义 。 
| 参数 function(index, oldPropertyValue) 表示 用 来 设置 返回 值 的 图 数 。 使 用 接收 到 集合 中 的 元 素 和 属性 的 
值 作为 参数 旧 的 索引 位 置 。 在 函数 中 ， 关 键 字 this 指 的 是 当前 元 素 。 
| 【示例 2】 先 为 所 有 被 选中 的 复 选 框 设置 只 读 属 性 ， 当 input 元 素 的 checked 属性 值 为 checked 时 ， 调 用 
| prop0 方法 设置 该 元 素 的 disabled 属性 值 为 tue， 在 浏览 右 中 预览 效果 ， 如 图 7.20 所 示 。 


<script> 

$(function(){ 

$("input[checked='checked']").prop({ 
disabled: true 

Ds 

}D) 

</script> 

<Input type="checkbox" checked="checked" /> 

<Inpnut type="checkbox" /> 

<Input type="checkbox" /> 

<Input type="checkbox" checked="checked" /> 
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attr(attributeName. function(1index, attr)) 


2. attr() | 
attr0 方法 也 能 够 为 匹配 的 元 素 设置 一 个 或 更 多 的 属性 。 用 法 如 下 : | 
attr(attributeName, value) | 
attr(map) | 

| 


参数 attributeName 表示 要 设置 的 属性 的 名 称 ; value 表示 一 个 值 ， 用 来 设置 属性 值 。 如 果 为 元 素 设 置 多 
个 属性 值 ， 可 以 使 用 map 参数 ， 该 参数 是 一 个 用 于 设置 属性 的 对 象 ， 以 { 属性 : 值 } 对 形式 进行 定义 。 

参数 function(index, attr) 表示 用 来 设置 返回 值 的 图 数 。 使 用 接收 到 集合 中 的 元 素 和 属性 的 值 作为 参数 旧 | 
的 索引 位 置 。 在 函数 中 ， 关 键 字 this 指 的 是 当前 元 素 。 

【示例 3】 使 用 attr0 方法 为 所 有 img 元 素 动态 设置 src 属性 值 ， 实 现 图 像 占 位 符 自动 显示 序列 图 标 图 像 
效 朱 ,在 浏览 硕 中 预览 效果 ， 如 图 7.21 所 示 。 

<script> 

$(function(){ 

$("ime").attr("src",function(index){ 
retumn "images/"+(ndext+1)+".jpe"; 


7.21 动态 设置 img 元 素 的 src 属性 值 


注 提示: attr0 方法 和 prop0 方法 都 可 以 用 来 设置 元 素 属性 ， 但 是 它们 在 用 法 上 还 是 有 细微 区 别 的 。 一 般 | 
使 用 propO 方法 获取 表单 属性 值 。 使 用 prop0 方法 时 ,返回 值 是 标准 属性 ， 如 $('#checkbox'). | 
prop(disabled")， 不 会 返回 disabled 或 者 空 字符 事 ， 只 会 是 true 或 false。 哪 些 属性 应 该 用 attr() 
方法 访问 ， 哪 些 属性 应 该 用 prop() 方法 访问 ， 详 细 说 明 如 表 7.4 所 示 。 
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表 7.4 attr() 方 法 和 prop() 方 法 用 法 比较 
attr() 方法 prop() 方法 


测 
十 


EE y 
contenteditable 
location (IE window .location ) ee WV 
Rom Eee v 
nl 
an 
width ( if needed over width() ) 


7.7.2 访问 属性 


在 DOM 中 使 用 getAttribute0 方法 可 以 访问 属性 的 值 。 用 法 如 下 : 


elementNode.getAttnbute(name) 


其 中 elementNode 表示 元 素 节 点 对 象 ; 参数 name 表示 属性 的 名 称 ， 以 字符 串 形式 传递 。 该 方法 的 返回 
值 为 指定 属性 的 值 。 
【示例 1】 直 接 使 用 JavaScript 读 取 段 落 文本 中 的 title 属性 值 ， 然 后 以 提示 对 话 框 的 形式 显示 出 来 。 
<script> 
window.onload = function(){ 
var Pp = document.getElementsByTagName("p")[0.l: 
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alert(p.getAttribute("title™)): 
上 
</script> 
<p title=" 段落 文本 "> 段落 文本 </p> 
与 设置 属性 的 方法 一 样 ，jQuery 定义 了 两 个 用 来 访问 元 素 属 性 值 的 方法 : propO0 和 attr0， 这 两 个 方法 的 
用 法 在 7.7.1 节 中 已 经 详细 讲解 。 
当 为 prop0 方法 和 attr0 方法 传递 两 个 参数 时 ， 一 般 用 来 为 指定 的 属性 设置 值 ， 而 当 为 这 两 个 方法 传递 
一 个 参数 时 ， 则 表示 读 取 指定 属性 的 值 。 
1. prop() 
prop0 方法 的 用 法 如 下 : 
prop(propertyName) 
参数 propertyName 表示 要 读 取 属性 的 名 称 。 
六 提示 : prop0 方法 只 获得 jQuery 对 象 中 第 一 个 匹配 元 素 的 属性 值 。 如 果 元 素 的 一 个 属性 没有 设置 ， 或 
者 如 果 没 有 匹配 的 元 素 ， 则 该 方法 返回 Undefined 值 。 为 了 获取 每 个 元 素 ， 不 妨 使 用 循环 结构 
的 jQuery.each() 或 .map0 方法 来 逐一 读 取 。 


attributes 和 properties 之 间 的 差异 在 特定 情况 下 是 很 重要 的 。 例 如 ， 针 对 下 面 HIML 片段 结构 : 
<nput type= "checkbox"” checked="checked" /> 


使 用 不 同 的 方法 访问 该 对 象 的 checked 属性 时 返回 值 是 不 同 的 。 


$(elem).prop("checked") /返回 布尔 值 true 
elem.getAttribute("checked") // 返回 字符 串 "checked" 
$(elem).attr("checked")(1.6+) // 返回 字 符 串 "checked" 
$(elem).attr("checked")(pre-1.6) /返回 布尔 值 tue 


但 是 ， 根 据 W3C 的 表单 规范 ，checked 属性 是 一 个 布尔 属性 ， 这 意味 着 该 属性 值 为 布尔 值 。 如 果 属 性 
没有 值 ， 或 者 为 空 字符 串 值 ， 这 就 给 在 脚本 中 进行 逻辑 判断 审 来 了 了 麻烦。 考虑 到 不 同 浏览 硕 对 其 处 理 绪 果 
不 同 ， 用 户 可 以 采用 下 面 方式 之 一 进行 检测 。 

(elem.checked ) 

if ( $(elem).prop("checked") ) 

if( $(elem).is(":checked") ) 


如 果 使 用 attr0 进行 检测 ， 就 容易 出 现 问 题 ， 因 为 attr("checked 将 获取 该 属性 值 ， 即 只 是 用 来 存储 默 
认 或 选中 属性 的 初始 值 ， 无 法 直观 地 检测 复 选 框 的 选中 状态 。 因 此 ， 使 用 下 面 代码 检测 复 选 框 选 中 状态 将 

if( $(elem).attr("checked") ) 

【示例 2】 为 复 选 框 绑 定 change0 事件 ， 当 复 选 框 状态 发 生变 化 时 再 次 调用 change0 方法 ， 在 该 方法 内 
通过 参数 函数 动态 获取 当前 复 选 框 的 状态 值 ， 以 及 checked 属性 值 ， 并 分 别 使 用 attrtQ0、propO 和 is0 方法 来 
进行 检测 ， 以 比较 使 用 这 三 种 方法 所 获取 的 值 差 异 ， 演 示 效 果 如 图 7.22 所 示 。 
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<script> 
$(function(){ 
$("input").change(function() { 
Var $input = $(this):; 
$("p").html(".attr(checked") = <b>" + $input.attr(‘checked'") + "</b><br>" 
+ ".prop('checked') = <b>" + $input.prop('checked') + "</b><br>" 
+".is(:checked') = <b>=>" + $input.is(:checked') ) : 


| }).change(): 
| 月 
| </script> 


| <input id="check" type="checkbox" checked="checked"> 
| <]label for="check"> 复 选 框 </label> 


| <p></D> 

| + hp//ocalho.. ~ OB hupy/ocalho.. ~ BO 
| 回复 选 杠 口 复 选 杠 

attr( checked’) = checked .attr( checked) = checked 
| Prop(checked ) = true Prop( checked ) = false 

| -sf :checked ) = true 4s( :checked ) = false 

| 图 7.22 检测 复 选 框 的 checked 属性 

| 2. attr () 

| attr() 方法 的 用 法 如 下 : 

| attr(attributeName) 

| 参数 attributeName 表示 要 读 取 属性 的 名 称 。 


”六 提示 : 与 prop0 方法 一 样 ，attr0 方法 只 获取 jQuery 第 一 个 匹配 元 素 的 属性 值 。 如 果 要 获取 每 个 单独 
元 素 的 属性 值 ， 需 要 使 用 jQuery 的 each() 方法 或 者 map0 方法 做 一 个 循环 。 


【示例 3】 调 


用 jQuery 的 each0 方法 遍历 所 有 匹配 的 img 元 素 ， 然 后 在 每 个 img 元 素 的 回调 函数 中 分 别 
| 使 用 attr0 获取 该 img 元 素 的 title 属性 值 ， 并 把 它 放 在 <p> 标签 中 ， 最 后 把 该 段落 文本 追加 到 img 元 系 的 
后面， 演示 效果 如 图 7.23 所 示 。 

<script> 

| $(function(){ 

| $("img").each(function() { 

| $(this).after("<span=>" + $(this).attr("title") + "</span>"); 


| ) 
| }) 
| </script> 


| <img src="images/1.jpe" title=" 淘气 包 " 广 
| <imeg src="images/2.jpe" title=" 得 意 忘 形 "” 廊 
<imeg src="images/3.jpg" title=" 快乐 宝 由 "” 六 
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图 7.23 attr0 方法 在 jQuery 对 象 集合 中 的 应 用 | 
7.7.3 删除 属性 | 
在 DOM 中 使 用 removeAttribute0 方法 可 以 删除 指定 的 属性 。 用 法 如 下 : | 


elementNode.removeAttribute(name) 


elementNode 表示 元 系 节 点 对 象 ， 人 参数 name 表示 属性 的 名 称 ， 以 字符 串 形式 传 


属性 ， 马 3 具有 默认 值 属性 时 ， 删 除 操作 将 被 忽略 。 如 采 文 档 类 型 声明 ( DTD ) 为 指定 的 
属性 设置 了 默认 值 ， 那 么 再 次 调用 getAttribute0 方法 将 返回 那个 默认 值 。 
【示例 1】 使 用 removeAttribute0 方法 删除 段落 文本 中 的 title 属性 。 
<script> 
window.onload = functionO{ | 
var Pp = document.getElementsByTaeName("p")[0|: | 
p.removeAttribute("title™): | 


| 
其 递 。 删 除 不 存在 的 | 
| 


} 
</script> 


<p title=" 段落 文本 "> 段落 文本 </p> | 
jQuery 定义 的 removeProp0 方法 和 removeAttr0 方法 都 可 以 删除 指定 的 元 素 属 性 。 | 


1. removeProp() 
removeProp() 方法 主要 用 来 删除 由 prop0 方法 设置 的 属性 集 。 对 于 一 些 内 置 属性 的 DOM 元 素 或 window | 
对 象 ， 如 果 试 图 删除 部 分 属性 ， 浏 览 器 可 能 会 产生 错误 。 因 此 ，jQuery 为 可 能 产生 错误 的 删除 属性 , 第 
1 次 给 它 分 配 一 个 undefined 值 ， 这 样 就 避免 了 浏览 器 用 法 如 下 : | 
removeProp(propertyName) | 


参数 propertyName 表示 要 删除 的 属性 名 称 。 
【示例 2】 先 使 用 prop0 方法 为 img 元 素 添加 一 个 code 属性 ， 然 后 访问 该 属性 值 ， 接 着 调用 removeProp0 
7 法 删除 code 属性 值 ， 再 次 使 用 prop0 方法 访问 属性 ， 则 显示 值 为 undefined， 演 示 效 来 如 图 7.24 所 示 。 

<script> 

$(function() { | 
var $img = $("Img"); | 
$img.prop("code", 1234): | 
$img.after("<div> 图 像 密码 初 设置 : "+ String($ime.prop("code")) + "</div>"): | 
$img.removeProp("code"): | 
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$imeg.after("<div> 图 像 密 码 现 在 是 : "十 String($img.prop("code")) + "</div>"): 
}) 
</script> 
<lmg src="images/2.jpe" /> 


这 


国 国 oeeeeceelec 


图 像 富 码 现在 是 : undsfaed 
图 像 宪 码 初 设置 : 1234 


图 7.24 ”removeProp0 方法 应 用 


2. removeAttr() 

removeAttr0 方法 使 用 DOM 原生 的 removeAttribute0 方法 ， 该 方法 的 优点 是 能 够 直接 被 jQuery 对 象 访 
问 调 用 ， 而 且 具 有 和 良好 的 浏览 器 兼容 性 。 对 于 特殊 的 属性 ， 建 议 使 用 removeProp0 方法 。removeAttr0 方法 
的 用 法 如 下 : 


removeAttr(attributeName) 


参数 attributeName 表示 要 删除 的 属性 名 称 。 
【示例 3】 为 按钮 绑 定 click 事件 处 理 函 数 ， 当 单 击 按钮 时 调用 removeAttr0 方法 移出 文本 框 的 disabled 属性 ， 
再 调用 focus0 方法 激活 文本 框 的 焦点 ， 并 设置 文本 框 的 默认 值 为 “可 编辑 文本 框 "， 演 示 效 果 如 图 7.25 所 示 。 
<script> 
$(function(){ 
$("button").click(function (OQ { 
$(this).nextO.removeAttr("disabled") 


.focus() 
.val(" 可 编辑 文本 框 "): 
1 
}) 
</script> 
<button> 激活 文本 框 =button> 


<input type="text" disabled="disabled" value=" 只 斌 文本 框 " 放 


请 
= [+ | 党 http:ylocalho 了 盟 必 
激 千 训 本 框 || 可 编辑 六 本 框 | x 


图 7.25 ”removeAttr0 方法 应 用 
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7.8 操 作 类 
为 了 方便 控制 类 样式 ，jQuery 定义 了 几 个 与 类 样式 相关 的 操作 方法 。 


7.8.1 添加 类 样式 


jQuery 使 用 addClass0 方法 专门 负责 为 元 素 追 加 样式 。 用 法 如 下 : 


addClass(className) 
addClass(function(index, class)) 


参数 className 表示 为 每 个 匹配 元 素 所 要 增加 的 一 个 或 多 个 样式 名 。 | 
参数 fnction(index, class) 函数 返回 一 个 或 多 个 用 空格 隔 开 的 要 增加 的 样式 名 ， 这 个 参数 函数 接收 元 素 
的 索引 位 置 和 元 素 旧 的 样式 名 作为 参数 。 | 
【 示例】 使 用 addClass0 方法 分 别 为 文档 中 第 二 、 三 段 添加 不 同 的 类 样式 ， 其 中 第 二 段 添 加 类 名 
highlight， 设 计 高 亮 背 景 显示 ， 第 三 段 添加 类 名 selected， 设 计 文 本 加 粗 显示 ， 演 示 效 果 如 图 7.26 所 示 。 | 
<script> 
$(function(){ 
$("p:last").addClass("selected"): 
$("p").eq(1).addClass("highlight"); 


用 

</script> 

<p> 温暖 一 生 的 故事 ， 寄 托 一 生 的 梦想 。</p> 
<p> 感动 一 生 的 情怀 ， 执 着 一 生 的 信念 。</p> 
<p> 成 就 一 生 的 辉煌 ， 炮 烙 一 生 的 记忆 。</p> 


: 由 -| 奎 https/lccalhc- = 国 蕊 


锡 暖 一 生 的 故事 ， 寄 托 一 生 的 梦想 。 


感动 一 生 的 情怀 ， 执 着 一 生 的 信念 。 
成 就 一 生 的 辉煌 ， 炮 烙 一 生 的 记忆 。 


图 7.26 addClass0) 方法 应 用 
六 提示 : addClass0 方法 不 会 替换 一 个 样式 类 名 ， 它 只 是 简单 地 添加 一 个 样式 类 名 到 可 能 已 经 指定 的 元 


素 上 。 对 所 有 匹配 的 元 素 可 以 同时 添加 多 个 样式 类 名 。 样 式 类 名 通过 空格 分 隔 ， 例 如 : 
$(p).addClass(classl class2"): 


一 般 addClass0 方法 与 removeClass0 方法 一 起 使 用 来 切换 元 素 的 样式 ， 例 如 : 
$('p').removeClass('classl] class2 ).addClass( class3'): 


7.8.2 删除 类 样式 
jQuery 使 用 removeClass0 方法 删除 类 样式 。 用 法 如 下 : 
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removeClass(| className |) 
removeClass(ftunction(index, class)) 


参数 className 为 每 个 匹配 元 素 移 除 的 样式 属性 名 ; 参数 函数 function(index, class) 返回 一 个 或 更 多 用 空 
格 隔 开 的 被 移 除 样 式 名 ， 该 参数 函数 接收 元 条 的 过 引 位 置 和 元 素 旧 的 样式 名 作为 参数 。 

【 示例】 使 用 removeClass0 方法 分 别 删除 偶数 行 段落 文本 的 blue 和 under 类 样式 ， 演 示 效 果 如 图 7.27 
所 示 。 
| <script> 
$(function(){ 

$("p:odd").removeClass("blue under"): 


py 

</script> 

<p class="blue under"> 床 前 明月 光 ，</p> 

<p class="blue under highlight"> 疑 是 地 上 霜 。=/p> 
<p class="blue under"> 举 头 望 明月 ，</p> 

<p class 一 "blue under"> 低头 思 故 乡 。</p> 


图 7.27 removeClass0 方法 应 用 


痊 提示 : 如 果 没 有 样式 类 名 作为 参数 ， 那 么 所 有 的 样式 类 将 被 移 除 。 从 所 有 匹配 的 每 个 元 素 中 同时 移 除 
多 个 用 空格 隔 开 的 样式 类 ， 例如: 


$('p').removeClass('classl class2") 


”7.8.3 切换 类 样式 


样式 切换 在 Web 开发 中 比较 常用 ， 如 折 钱 、 开 关 、 伸 缩 、Tab 切换 等 动态 效果 。jQuery 使 用 toggleClass0 
”方法 开 / 关 定义 类 样式 。 用 法 如 下 : 
| toggleClass(className) 


toggleClass(className, switch) 
toggleClass(function(index. class), | switch |) 


| 参数 className 表示 在 匹配 的 元 素 集 合 中 的 每 个 元 素 上 用 来 切换 的 一 个 或 多 个 ( 用 空格 隔 开 ) 样式 类 
| 名 ; switch 表示 一 个 用 来 判断 样式 类 添加 还 是 移 除 的 布尔 值 。 
| 参数 图 数 function(index, class) 用 来 返回 在 匹配 的 元 素 集 合 中 的 每 个 元 素 上 用 来 切换 的 样式 类 名 ， 该 参 
数 函 数 接收 元 素 的 索引 位 置 和 元 素 旧 的 样式 类 作为 参数 。 

【示例 】 为 文档 中 的 按钮 绑 定 click 事件 处 理 函 数 ， 当 单 击 该 按钮 时 为 p 元 素 调 用 toggleClass0) 方法 ， 并 
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传递 hidden 类 样式 ， 实 现 段落 包含 的 图 像 隐藏 或 者 显示 ， 演 示 歼 果 如 图 7.28 所 不。 


<script> 
$(function() { 

$("input").eq(0).click(function(O) { 

$("p").toeeleClass("hidden"): 

1) 
}) 
</script> 
<p> 红豆 生 南 国 ， 春 来 发 几 枝 。 愿 君 多 采 括 ， 此 物 最 相思 。</p> 
<input type 一 "button" value=" 切换 样式 ” 广 


,二 | [+ - | 尝 httpy/localhost ~ 昌 


红 吕 生 南 国 ， 春 来 点 几 梳 。 诛 看 多 采 报 ， 
此 物 最 相思 。 


图 7.28 ”togeleClass0 方法 应 用 


凑 提示 : toggleClass0 方法 以 一 个 或 多 个 样式 类 名 作为 参数 。 如 果 在 匹配 的 元 素 集合 中 的 每 个 元 素 上 存 
在 该 样式 类 就 会 被 移 除 ; 如 果 某 个 元 素 没 有 这 个 样式 类 就 会 加 上 这 个 样式 类 。 如 果 该 方法 包含 
第 二 个 参数 ， 则 使 用 第 二 个 参数 判断 样式 类 是 否 应 该 被 添加 或 移 除 。 如 果 这 个 参数 的 值 是 true， 
那么 这 个 样式 类 将 被 添加 ; 如 果 这 个 参数 的 值 是 false， 那 么 这 个 样式 类 将 被 移 除 。 也 可 以 通过 
函数 来 传递 切换 的 样式 类 名 。 例 如 : 

$("p").togeleClass(function() { 
if ($(this).parent().1s('.bar’)) { 
return 小 appY : 
+ else 1 
return 'sad': 
i 
}); 


上 面 代 码 表 示 如 果 匹 配 元 素 的 父 级 元 素 有 bar 样式 类 名 ， 则 为 pp 元 素 切 换 happy 样式 类 ， 
否则 将 切换 sad 样式 类 已 


7.8.4 判断 样式 
在 DOM 中 使 用 hasAttribute() 方法 可 以 判断 指定 属性 是 否 被 设置 。 用 法 如 下 : 
hasAttribute(name) 


参数 name 表示 属性 名 ， 但 是 在 复合 类 样式 中 ， 该 方法 无 法 判断 class 属性 中 是 否 包 含 了 特定 的 类 样式 。 
jQuery 使 用 hasClass0 方法 判断 元 素 是 否 包含 指定 的 类 样式 。 


hasClass(className) 
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参数 className 表示 要 查询 的 样式 名 。 
【示例 】 使 用 hasClass0 方法 判断 p 元 素 是 否 包 含 red 类 样式 。 
<script> 
$(function(){ 
alert($("p").hasClass("red")): /返回 true 
1) 
</script> 
<p class="Tred"> 段落 文本 </p> 


hasClass() 方法 实际 上 是 is0 方法 的 再 包装 。jQuery 为 了 方便 用 户 使 用 ， 重 新 定义 了 hasClass0 专门 用 
来 判断 指定 类 样式 是 否 存 在 。 其 中 ，$("p").hasClass("red") 可 以 改写 为 $("p").is(".red")。 


7.9 操作 内容 


jQuery 提供 多 个 方法 以 字符 串 的 形式 操作 文档 内 容 。 


7.9.1 读 写 HTML 字符 串 


DOM 为 元 素 定 义 了 innerHTML 属性 ,该 属性 以 字符 串 形 式 读 写 元 素 包 含 的 HTML 结构 。 
【示例 1] 使 用 innerHTML 属性 访问 div 元 素 包含 的 所 有 内 容 ， 然 后 把 这 些 内 容 通过 innerHTML 属性 
传递 给 pp 元素， 并 徐 盖 掉 p 元 素 包含 的 文本 ， 演 示 效 果 如 图 7.29 所 示 。 
<script> 
window.onload = function(){ 
var Pp = document.getElementsByTagName("p")[0lj; 
var div = document.getElementsByTagName("div")[0|: 
p.IDnerHIML = div.innerHTM™ML.: 


} 
</script> 
<dIv> 
<hl> 标题 </hl> 
<p> 段落 文本 </p> 
</div> 


二 


加 Seahoaet -ac hn 


图 7.29 innerHTML 属性 应 用 


"2216 。 


第 ( 章 操作 DOM Se 


jQuery 使 用 html0 方法 以 字符 串 形式 读 写 HTML 文档 结构 。 用 法 如 下 : 

html0) 

html(htmlString) 

html(function(index, html)) 

参数 htmlstring 用 来 设置 每 个 匹配 元 素 的 一 个 HIML 字符 串 ; 参数 函数 function(index, html) 用 来 返回 
设置 HTML 内 容 的 一 个 函数 ， 该 参数 函数 可 以 接收 元 素 的 索引 位 置 和 元 素 旧 的 HTML 作为 参数 。 | 

当 html0 方法 不 包含 参数 时 ， 表 示 以 字符 串 形式 读 取 指定 节点 下 的 所 有 HTML 结构 。 当 html0 方法 包 
含 参数 时 ， 表 示 回 指定 节点 下 写 人 HIML 结构 字符 串 ， 同 时 会 覆盖 该 节点 原来 包含 的 所 有 内 容 。 | 

【示例 2】 针 对 示例 1 使 用 jQuery 的 html0 方法 实现 的 代码 如 下 : 


$(function() { 
var s = $("div").htmlO: 
$("p") -html(s): 

}) 


< 似 注意 : html0 方法 实际 上 是 对 DOM 的 innerHTML 属性 包装 ， 因 此 它 不 支持 XML 文档 。 


7.9.2 读 写 文本 


jQuery 使 用 text0 方法 读 写 指定 元 素 下 包含 的 文本 内 容 ， 这 些 文本 内 容 主 要 是 指 文本 节点 包含 的 数据 。 

text(textString) | 

text(function(index., text)) | 

参数 textString 用 于 设置 匹配 元 素 内 容 的 文本 ; 参数 六 数 function(index, texb 用 来 返回 设置 文本 内 容 的 | 
一 个 函数 ， 该 参数 函数 可 以 接收 元 素 的 索引 位 置 和 元 素 旧 的 文本 值 作为 参数 。 / 

当 text0 方法 不 包含 参数 时 ， 表 示 以 字符 串 形式 读 取 指定 节点 下 的 所 有 文本 内 容 。 当 text0 方法 包含 参 
数 时 ， 表 示 辐 指定 节点 下 与 人 文本 字符 串 ， 同 时 获 关 该 节点 原来 包含 的 所 有 文本 内 容 。 

【 示例】 使 用 text0 方法 访问 div 元 素 包 含 的 所 有 内 容 ， 然 后 把 这 些 内 容 通 过 text0 方法 传递 给 p 元 素 ， 
并 上 覆 兰 掉 p 元 素 包 含 的 文本 ， 演 示 效 果 如 图 7.30 所 示 。 


<script> 

$(functionO{ 
var s = $("dIv").text(); 
$("p")-text(s); 

月 

</script> 

<div> 
<hl> 标题 </h1> 
<p> 段落 文本 </p> 

</div> 
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图 7.30 textO 方法 应 用 


| jQuery 使 用 val0 方法 读 写 指定 表单 对 象 包含 的 值 。 当 val0 方法 不 包含 参数 并 调用 时 ， 表 示 将 读 取 指 
。 定 表 单元 素 的 值 ; 当 val 0 方法 包含 参数 时 ， 表 示 向 指定 表单 元 素 写 人 值 。 用 法 如 下 : 

| val() 

| val( value ) 


val( function(1index, value) ) 
参数 value 表示 一 个 文本 字符 串 或 一 个 以 字符 串 形式 的 数组 来 设 定 每 个 匹配 元 床 的 值 ;参数 函数 function 


(index, value) 表示 一 个 用 来 返回 设置 值 的 函数 。 
| 【示例 1】 当 文本 框 获取 焦点 时 ， 清 空 默 认 的 提示 文本 信息 ， 准 备用 户 输入 值 ， 而 当 离 开 文 本 框 后 ， 如 


” 果 文 本 框 没 有 输入 信息 ， 则 重新 显示 默认 的 值 ， 演 示 效 果 如 图 7.31 所 示 。 
<script> 
$(function() { 


$("input").focus(function() { 
if($(this).valO ==" 请 输入 文本 ") $(this).val(""): 
月 
$("input").blur(function() { 
if($(this).val( ="") $(this).val(" 请 输入 文本 "): 


月 
月 
</script> 


<form action="" method="get"> 
<input type="text" value=" 请 输入 文本 " 记 


</form> 


于 于 


S| HO- rte/ocalho.. -| 本 OB reocahe.. - 


请 输 点 区 机 


图 7.31 val0 方法 应 用 
注 提示 : val0 方法 在 读 写 单 选 按钮 、 复 选 框 、 下 拉 菜 单 和 列表 框 的 值 时 ， 比 较 实 用 且 操 作 速 度 比 较 快 。 
对 于 Val() 方法 来 说 ， 可 以 传递 一 个 参数 设置 表单 的 显示 值 。 由 于 下 拉 菜 单 和 列表 框 ， 显 示 为 每 
个 选项 的 文本 ， 而 不 是 value 属性 值 ， 故 通过 设置 选项 的 显示 值 ， 可 以 决定 应 显示 的 项 目 。 不 
过 对 于 其 他 表单 元 素来 说 ， 必 须 指 定 value 属性 值 ， 方 才 有 效 。 如 果 为 元 素 指 定 多 个 值 ， 则 可 
以 以 数组 的 形式 进行 参数 传递 。 
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【示例 2】 单 击 第 一 个 按钮 可 以 使 用 val0 方法 读 取 各 个 表单 的 值 ， 单 击 第 二 个 按钮 可 以 设置 表格 表单 的 
值 ， 演 示 效 果 如 图 7.32 所 示 。 


<script> 
$(function() { 
$("button").eq(0).click(function(O{ 
alert($("#s1").valO + $("#s2").val(O +$("input").valO+ $(":radio").valO); 
1) 
$("button").eq(1).click(function(O{ 
$("#s1").val(" 单 选 2"); | 
$("#s2").val([" 多 选 2"," 多 选 3"]); | 
$("input").val(["6", "8"]): | 


}) | 
} | 
</script> 
<form action="" method=—"get"> 
<select 1d="s1"> | 
<option value="1" selected="selected"> 单 选 1</option> | 
<option value="2"> 单 选 2</option> | 
</select> 
<select 1d="s2" size="3" multiple="multiple"> 
<option value="3" selected="selected"> 多 选 1</option> | 
<option value='"4"> 多 选 2</option> 
<option value="$" selected="selected"> 多 选 3</option> 
</select> 
<input type="checkbox" value="6"/> 复 选 框 1 
<input type="checkbox" value="7" checked="checked"/> 复 选 框 2<br 广 
<input type="radio" value="8"/> 单 选 按 钮 1 
<input type="radio" value="9" checked="checked"/> 单 选 按钮 2<br /><br > | 
<button> 显示 种 个 表单 对 和 象 的 值 </button> | 
<button> 设置 各 个 表单 对 象 的 值 </button> | 


</form> 


= 一 叶 -| 蝇 httpWlocalho. ~ 盟 避 | 全 |ocalhost 


| 中 复 选 框 1 回复 这 枉 ? | 
语音 授 护 和 1 和 @ 单 灌 榨 铀 2 | 


显示 督 个 表单 对 彰 的 值 || 设置 各 个 表单 对 象 的 填 


图 7.32 val0 方法 应 用 | 


7.10 案例 实战 | 


下 面 通过 多 个 示例 练习 jQuery 操作 DOM 的 技巧 。 / 
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7.10.1 设计 复 选 框 的 全 选 、 反 选 、 取 消 、 选 中 输出 功能 


如 何 选 中 所 有 复 选 框 ， 实 现 页 面 快速 操作 的 功能 是 十 分 有 用 的 。 例 如 ， 在 购物 网 站 上 选择 购物 车 内 的 
商品 时 ， 如 果 想 买 下 目 己 选 好 的 全 部 商品 ， 会 有 一 个 “选择 全 部 ”的 按钮 供用 户 使 用 ， 既 方便 又 快捷 。 本 
例 设计 类 似 的 功能 ， 效 果 如 图 7.33 所 示 。 


P| +) http://localho.. ~ B 0 | @ localhost 
口 列表 项 目 1 
口 列表 项 目 3 


十 老 贡 目 4 
口 列表 项 目 5 
口 列表 项 目 6 
EE 


图 7.33 复 选 框 的 批 操作 


设计 的 列表 项 目 结构 如 下 : 


<dv class—="mar20"> 
<Input name—"newslist-1" 1d="newslist-1" type="checkbox" value="1"/> 
<label for="newslist-1"><a href="#"> 列表 项 目 1</a></label> 

</dIv> 


设计 的 jQuery 脚本 如 下 : 


$(function(){ 
// 全 选 
$("#allselect").click(function(){ 
$(":checkbox").each(function(){ 
$(this).prop("checked".true); 
$+(this).next().css({"backeround-color":"blue","color":"White™ +}): 
;); 
月: 
/ 反选 
$("#invert").click(function() { 
$(":checkbox").each(function() 1 
if($(this).prop("checked")){ 
$(this).prop("checked" .false): 
$(this).next().css({"backeround-color": "White"."color":"black"™ :): 
telse{ 
$(this).prop("checked".true): 
$(this).next().css({"backeround-color™": "blue","color":"White™ }); 
} 


1 
人 


// 取消 
$("#cancel").click(function() { 
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$+(":checkbox").each(function() { 
$(this).prop("checked",false): 
$(this).next().css({"backeround-color": "White","color":"black™ }): 


3) 
}) 


/所 有 复 选 框 (:checkbox) 单 击 事件 
$(":checkbox").click(functionO { 
if(3(this).prop("checked") i 
$(this).next().css({"backeround-color": "blue","color":"White" }); 


Velse{ 
$(this).next().css({"backeround-color": "White","color":"black"™ }); 
! 
}): 
/ 输出 


$("#output").click(function() { 
$(":checkbox").each(functionO { 
if($(this).prop("checked")){ 


alert($(this).valO): 
} 
二 
}); 
}); 
本 例 关键 代码 如 下 : 


$(":checkbox").each(function(O) 1{ 
$(this).prop("checked",true):; 
1 


其 中 ，prop(propertyName) 函数 获取 匹配 的 元 素 集 中 第 一 个 元 素 的 属性 值 ， 参 数 propertyName 表示 要 
得 到 的 属性 的 名 称 。prop(propertyName,value) 因数 为 匹配 的 元 素 设 置 一 个 或 更 多 的 属性 。 人 参数 value 是 要 为 
属性 设置 的 值 。 

如 果 prop0 因数 中 元 素 的 一 个 属性 都 没有 设置 ， 或 者 如 果 没 有 匹配 的 元 素 ， 则 返回 undeftined 值 。 为 了 
能 为 每 个 元 素 设 置 单独 的 值 ， 可 使 用 循环 结构 来 实现 ， 如 each0 函数 或 map0 婧 数 。 


7.10.2 ” 链 式 控 作 DOM 


jQuery 的 代码 是 非常 优雅 的 ， 也 是 非常 灵巧 的 。 它 允许 用 户 连续 编写 各 种 行为 ， 从 而 实现 按 惯 性 思维 
进行 快速 开发 ， 这 种 代码 形式 被 称 为 链 式 语 法 。 

在 下 面 这 个 示例 中 使 用 了 两 段 脚本 ， 即 实现 了 复杂 的 页 面 交互 效果 ， 如 图 7.34 所 示 。 第 一 段 代 码 使 用 
jQuery 构造 融 困 数 ($0 ) 创建 四 个 按钮 ， 并 把 它们 附加 到 文档 中 。 第 二 段 代码 通过 链 式 语法 添加 连续 的 行 
为 ， 分 别 选 中 这 四 个 按钮 并 为 它们 绑 定 不 同 的 事件 处 理 函 数 。 

<script type=—"text/Javascript" > 

$(functionO { 

// 第 一 段 代码 ， 在 文档 中 添加 四 个 按钮 
$('<input type="button" value=" 第 一 个 按钮 "/><input type="button" value=" 第 二 个 按钮 "/><input type="button" 
value=" 删除 按钮 事件 处 理 函 数 "/><input type="button" value=" 隐藏 或 显示 文本 "/>").appendTo($('body")): 
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/第 二 段 代 码 ， 分 别 选 中 四 个 按钮 ， 并 为 它们 绑 定 不 同 的 事件 处 理 男 数 


$(input[type="button"]") 
.eq(0).click(functionO { // 匹配 第 一 个 按钮 ， 并 绑 定 click 事件 处 理 男 数 
alert( 是 第 一 个 按钮 的 事件 处 理 困 数 ): 
1).endO.eq(1) /返回 所 有 按钮 ， 再 匹配 第 二 个 按钮 
click(functionO{ / 为 第 二 个 按钮 绑 定 click 事件 处 理 肯 数 
$Cinput[type="button"|:eq(0)').trigger('click’): 
1).endO.eq(2) /返回 所 有 按钮 ， 再 匹配 第 三 个 按钮 
.click(functionO{ /为 第 三 个 按钮 绑 定 click 事件 处 理 了 半数 
$(input[type="button"]:eq(0)).unbind('click’"): 
1).endO.eq(3) /返回 所 有 按钮 ， 再 匹配 第 四 个 按钮 
.toggle(fonction0O{ / 为 第 四 个 按钮 绑 定 toggle 事件 处 理 函 数 
$("'.panel").hide('slow’"): 
}, function(){ 
$('.panel').show('slow'"): 
月 : 
)); 
</script> 


<div class="panel">jQueiy 链 式 择 作 DOM</div> 


-5 
( 5 人) 由: | 过 http://localhost/te ~ 昌 上 蕊 急 localhost x | (ve 
jQuery 链 式 操作 DOM z 
TEL 


图 7.34 ”jQuery 链 式 操作 


在 上 面 代码 中 ， 通 过 end0 方法 取消 当前 的 jQuery 对 象 ， 返 回 前 面 的 jQuery 对 象 。 这 样 当 匹配 某 个 按 
钮 时 ， 为 其 绑 定 事件 处 理 函 数 ， 然 后 调用 end0 方法 ， 则 又 返回 前 面前 一 个 jQuery 对 象 ， 即 按钮 集合 。 


< 秀 注意 : jQuery 中 有 几 个 方法 并 不 返回 jQuery 对 象 ， 所 以 链 式 操作 就 不 能 继续 下 去 ， 如 get0 方法 就 不 
能 像 eq0) 方法 那样 使 用 。 


链 式 语法 是 一 种 比较 时 尚 的 编程 方法 ,但 是 在 使 用 这 种 方法 时 ， 为 了 方便 阅读 ， 读 者 应 该 注意 几 个 
问题 
加 ”如 果 在 同一 个 jQuery 对 象 上 执行 不 超过 三 个 方法 ， 则 可 以 在 同一 行内 书写 。 人 例如， 下面 一 行 代码 
选择 第 一 个 按钮 ， 修 改 它 的 名 称 ， 并 为 其 附加 一 个 类 。 
$(inputftype="button"]").eq(0).val(" 修改 按钮 名 称 ").addClass("red"): 


回 ”如 于 在 同一 个 jQuery 对 象 上 执行 很 多 操作 ， 则 应 该 分 行书 写 ， 以 方便 阅读 和 修改 。 
名 ”对 于 多 个 对 象 执行 少量 的 操作 ， 可 以 为 每 个 对 和 象 书写 一 行 代码 。 如 果 涉 及 子 元 系 操 作 ， 可 以 考虑 
使 用 缩 进 进行 设计 ， 这 样 就 能 够 区 分 层次 。 例 如 ， 针 对 上 面 示 例 ， 可 以 进行 如 下 缩 进 显示 。 
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$0inputltype= "button' |) 
.eq(0).click(function(){ 
alert('you clicked me!"): 
1) 


如 有 果 对 于 多 个 对 和 象 执行 很 多 连续 的 操作 ， 则 可 以 考虑 结合 上 面 几 种 方法 同时 进行 设计 。 


7.10.3 简单 求 和 


本 节 示例 利用 jQuery 快速 匹配 文档 中 的 按钮 ， 并 为 按钮 绑 定 事 件 ， 演 示 如 何 快速 获取 用 户 输入 值 , 并 
求 出 输出 值 的 和 ， 效 果 如 图 7.35 所 示 。 


<script type="text/Javascript" > 


$(function() { 
$("input[type='button']").click(functionO{ VW 匹配 提交 按钮 ， 并 缘 定 事 件 处 理 函 数 
var i= 0: /初始 化 临时 变量 


$("input[type='text]").each(functionO4// 枚 举 每 个 文本 框 并 获取 值 ， 然 后 相 加 
1+= parseInt($(this).val()); 
EE 
$(label").text(i): // 显示 结果 
}); 
$(input:1t(2)") 1/ 匹配 非 提交 按钮 ， 以 及 <label> 标签 ， 通 过 链 式 语法 定义 样式 
.add("label') 
.css('border','none") 
.Css(DorderBottom' ,solld 1px navy’) 
-Css(textAllpgn ,center ) 
.Css("width',3em') 
.Css({"Wwidth':’30px'} ): 
月 : 
</script> 


<nput type="text" value="" /> 十 
<nput type="text" value="" /> 


<label=></label> 


Pe -| http:i/localhe 


姓 
3+23 国 > 


图 7.35 jQuery 求 和 操作 


在 上 面 代码 中 ，$Cinput[type=button]" 选择 器 可 以 匹配 文档 中 type 属性 值 为 button 的 input 元素， 这 
个 表达 式 模仿 了 CSS 表达 式 ， 然 后 为 button 添加 click 事件 处 理 函 数 。 | 

在 click 事件 处 理 蚊 数 中 ，$0input[type='text] 选择 上 兹 能 够 匹配 文档 中 所 有 输入 框 ， 然后 调用 eachg 方 
法 遍历 所 有 匹配 的 文本 框 ， 利 用 $(this) 选择 带 获 取 当 前 文本 框 ， 使 用 val0 方法 读 取 当前 文本 框 的 仁 ， 再 使 
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用 JavaScript 图 数 parseIntO 把 获取 的 字符 串 类 型 的 值 转 换 为 数值 类 型 ， 相 加 之 后 作为 文本 信息 添加 到 label 
元 素 中 显示 出 来 。 

$C(input:]t(2)") 选择 器 能 够 匹配 文档 中 的 所 有 input 元 素 ， 然 后 入 选 出 排 在 前 面 的 两 个 input 元素， 其 中 
的 伪 类 “:lt” 表 示 序 号 小 于 某 个 值 的 意思 。 匹 配 到 input 元 素 之 后 ， 再 添加 label 对 象 ， 合 并 成 一 个 jQuery 
对 象 。 然 后 通过 链 式 语法 连续 调用 三 个 css0 方法 为 文本 框 设 置 样式 。 


7.11 在 线 练 习 


丁 提供 多 个 小 示例 ， 主 要 为 初学 者 提供 实践 的 机 会 ， 感 兴趣 的 读者 可 以 扫 人 抬 操 作 。 
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使 用 CSS 


全 视频 讲解 : 30 分 钟 ) 


CSS 与 JavaScript 有 着 明确 的 分 工 ， 前 者 负责 页 面 的 视觉 效果 ， 后 者 负责 与 用 户 的 
行为 互动 。 但 是 ， 它 们 年 竞 同 属 网 页 开发 的 前 端 ， 因 此 不 可 避免 有 着 交叉 和 互相 配合 。 
本 章 将 介绍 如 何 使 用 JavaScript 脚本 和 jQuery 驱动 CSS 样式 ， 完 成 各 种 交互 式 行为 的 
设计 。 


【学 习 重 点 】 

Py 使 用 JavaScript 操作 样式 。 

Wp| 使 用 jQuery 操作 样式 表 。 

P| 设计 简单 的 页 面 交 互 行为 或 将 效 。 


zony 入 和 门 到 精通 ( 柚 课 精 编 且 ) 


8.1 CSS 脚本 化 基础 


操作 CSS 样式 最 简单 的 方法 ， 就 是 使 用 网 页 元 素 节 点 的 getAttribute0 方法 、setAttribute( 方法 和 
removeAttribute( 方法 ， 直 接 读 写 或 删除 网 页 元 素 的 style 属性 。 例 如 : 


div.setAttribute( 

Style'， 

backsground-colorTed:' + 'border: 1px solid black:' 
上 


上 面 的 代码 相当 于 下 面 的 HIML 代码 。 
<dv style="backeround-color:red:; border: 1px solid black:" /> 


DOM 2 级 规范 为 CSS 样式 的 脚本 化 定义 了 一 套 API， 详 细 说 明 可 以 扫 码 了 解 。 
本 厄 将 简单 介绍 如 何 正 确 访 问 脚本 样式 ， 不 涉及 各 个 模块 的 系统 介绍 。 


8.1.1 访问 行内 样式 


CSS 样式 包括 三 种 形式 : 外 部 样式 、 内 部 样式 和 行内 样式 。 在 早期 DOM 中 ,任何 支持 style 属性 的 
HTML 标签 在 JavaScript 中 都 有 一 个 映射 的 style 属性 。 

HTMLElement 的 style 属性 是 一 个 可 读 可 写 的 CSS2Properties 对 象 。CSS2Properties 对 象 表示 一 组 CSS 
样式 属性 及 其 值 ， 它 为 每 个 CSS 属性 都 定义 了 一 个 JavaScript 脚本 属性 。 

这 个 style 对 象 包含 了 通过 HTML 的 style 属性 设置 的 所 有 CSS 样式 信息 ,但 不 包含 CSS 样式 表 包 含 的 
样式 。 因 此 ， 使 用 元 素 的 style 属性 只 能 访问 行内 样式 ， 不 能 访问 样式 表 中 的 样式 信息 。 

style 对 象 可 以 通过 cssText 属性 返回 行内 样式 的 字符 串 表示 。 字 符 串 中 去 掉 了 包围 属性 和 值 的 花 括号 ， 
以 及 元 素 选 择 器 名 称 。 

除了 cssText 属性 外 ，style 对 象 还 包含 每 个 与 CSS 属性 一 一 映射 的 脚本 属性 〈 需 要 浏览 项 支持 )。 这 些 
脚本 属性 的 名 称 与 CSS 属性 的 名 称 紧密 对 应 ， 但 是 为 了 避免 JavaScript 语法 错误 而 进行 了 一 些 改变 。 含 有 
连 字 符 的 多 词 属性 ( 如 fontfamily ) 在 JavaScript 中 会 删除 这 些 连 字符 ， 以 驼峰 式 命名 法 重新 命名 CSS 的 
脚本 属性 名 称 ( 如 fontFamily )。 

【示例 】 对 于 border-right-color 属性 来 说 ， 在 脚本 中 应 该 使 用 borderRightColor。 所 以 下 面 页 面 脚本 中 的 
用 法 都 是 错误 的 。 

<div id="box" > 盒子 </div> 

<script> 

Var box = document.getElementByld("box"): 

box.style.border-rnight-color = "red": 

box.style.border-right-style = "solid": 

</script> 


针对 上 面 页 面 脚本 ， 可 以 修改 为 : 


<script> 
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Var box = document.getElementBylId("box"): 
box.style.borderRightColor = "red": 
box.style.borderRightStyle = "solid"; 
</script> 


岩 提示 : 使 用 CSS 脚本 属性 时 ， 应 该 注意 以 下 几 个 问题 。 
由 于 float 是 JavaScript 保留 字 ， 人 禁止 使 用 ， 因 此 使 用 cssFloat 表示 float 属性 的 脚本 名 称 。 
在 JavaScript 中 ， 所 有 CSS 属性 值 都 是 字符 串 ， 必 须 加 上 引号 ， 以 表示 字符 串 数 据 类 型 。 
elementNode.style.tontFamlly = "Arial Helvetica sans-serif" 


elementNode.style.cssFloat = "left": 
elementNode.style.color = "#0000"; 


CSS 样式 声明 结尾 的 分 号 不 能 够 作为 属性 值 的 一 部 分 被 引用 ，JavaScript 脚本 中 的 分 号 只 是 
JavaScript 语法 规则 的 一 部 分 ， 不 是 CSS 声明 中 分 号 的 引用 。 

声明 中 属性 值 和 单位 都 必须 作为 值 的 一 部 分 ， 完 整地 传递 给 CSS 脚本 属性 ， 省 略 单位 则 所 
设置 的 脚本 样式 无 效 。 
elementNode.style.width = "100px": 


在 脚本 中 可 以 动态 设置 属性 值 ， 但 最 终 赋值 给 属性 的 值 应 是 一 个 字符 串 。 
elementNode.style.top = top + "pxX"; 
elementNode.style.right = right + "px": 
elementNode.style.bottom = bottom + "px"; 
elementNode.style.left = left + "px": 


如 果 没 有 为 HTML 标签 设置 style 属性 ， 那 么 style 对 象 中 可 能 会 包含 一 些 属性 的 默认 值 ， 
但 这 些 值 并 不 能 准确 地 反映 该 元 素 的 样式 信息 


人 


8.1.2 使 用 style 


DOM 2 级 样式 规范 为 style 对 象 定义 了 一 些 属 性 和 方法 ， 简 单 说 明 如 下 : 
cssText: 访问 HTML 标签 中 style 属性 的 CSS 代码 。 

length: 元 素 定 义 的 CSS 属性 的 数量 。 

parentRule: 表示 CSS 的 CSSRule 对 象 。 

getPropertyCSSValue0: 返回 包含 给 定 属性 值 的 CSSValue 对 象 。 
getPropertyPriority0: 返回 指定 CSS 属性 中 是 否 附 加 了 !important 命令 。 
item(): 返回 给 定位 置 的 CSS 属性 的 名 称 。 

getPropertyValue0 : 返回 给 定 属性 的 字符 串 值 。 

removeProperty0: 从 样式 中 删除 给 定 属性 。 

setProperty0 : 将 给 定 属性 设置 为 相应 的 值 ， 并 加 上 优先 权 标 志 。 

下 面 重点 介绍 style 对 象 方法 的 使 用 。 

1. getPropertyValue() 方法 

getPropertyValue( 方法 能 够 获取 指定 元 素 样 式 属性 的 值 。 用 法 如 下 : 


var value = e.style.getProperty Value(propertyName) 


四 岗 和 和 和 向 负 轴 多 
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参数 propertyName 表示 CSS 属性 名 ， 不 是 CSS 脚本 属性 名 ， 对 于 复合 名 应 该 使 用 连 字符 进行 连接 。 
【示例 1】 使 用 getPropertyValue0 方法 获取 行内 样式 中 的 width 属性 值 ， 然 后 输出 到 盒子 内 显示 ， 效 果 
如 图 8.1 所 示 。 
<script> 
window.onload = function( ){ 
var box = document.getElementById("box"): /获取 <div id="box"> 
var width = box.style.getPropertyValue("width"): // 该 取 div 元 素 的 width 属性 值 
box.innerHTML = "盒子 宽度 , "十 width: /输出 显示 width 值 


} 
</script> 
<div id="box" style="width:300px: height:200px:border:solid 1px red" > 盒 于 </div> 


盒子 宽度 : 300px 


图 8.1 使 用 getPropertyValue0 方法 读 取 行内 样式 


早期 正 浏览 曙 ， 但 是 可 以 通过 style 对 象 直接 访问 样式 属性 来 获取 指定 
样式 的 属性 值 。 
【示例 2】 针对 示例 1 代码 ， 可 以 使 用 如 下 方式 读 取 width 属性 值 。 
window.onload = function(){ 
var box = document.getElementById("box"): 
var width = box.style.width: 
box.innerHTML = "盒子 宽度 : " + width: 


不 文 持 getPropertyValue0 方法 


2. setProperty() 方法 
setProperty( 方法 为 指定 元 素 设置 样式 。 用 法 如 下 : 
e.style.setProperty(propertyName, value, priority) 


加”propertyName: 设置 CSS 属性 名 。 

加 value: 设置 CSS 属性 值 ， 包 含 属 性 值 的 单位 。 

四 ”priority: 表 1important 优先 级 命令 ， 如 果 不 设 置 则 可 以 用 空 字符 串 表 示 。 
【示例 3】 使 用 setProperty0 方法 定义 盒子 的 显示 宽度 和 高 度 分 别 为 400 像素 和 200 像素 。 
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<script> 

window.onload = function(){ 
var box = document.getElementBylId("box"): ”获取 <div id="box"> 
box.style.setProperty("width"."400px",""): // 定义 盒子 宽度 为 400 像素 
box.style.setProperty("height","200px",""); // 定义 盒子 宽度 为 200 像素 

} 

</script> 

<div id="box" style="border:solid 1px red" > 盒 于 </div> 


如 有 果 莱 容 早 期 正 浏览 禹 ， 可 以 使 用 如 下 方式 设置 。 
window.onload = function(){ 
Var box = document.getElementById("box"): 
box.style.width = "400px": 
Dox.style.helpght = "200px": 
} 


3. removeProperty() 方法 
removeProperty0 方法 可 以 移出 指定 CSS 属性 的 样式 声明 。 用 法 如 下 : 


e.style. removeProperty (propertyName) 


4.item() 方法 
item0( 方法 返回 style 对 象 中 指定 索引 位 置 的 CSS 属性 名 称 。 用 法 如 下 : 


var name = e.style.item(1ndex) 


参数 index 表示 CSS 样式 的 索引 号 。 

5. getPropertyPriority() 方法 

getPropertyPriority0 方法 可 以 获取 指定 CSS 属性 中 是 否 附 加 了 limportant 优先 级 命令 ， 如 果 存 在 则 返回 
"important" 字符 串 ， 否 则 返回 空 字符 串 。 

【示例 4】 和 定义 鼠标 经 过 盒子 时 ， 设 置 盒子 的 背景 色 为 赣 色 ， 而 边框 颜色 为 红色 ， 当 移出 盒子 时 ， 又 恢 
复 到 盒子 默认 设置 的 样式 ; 而 单 击 盒子 时 则 在 盒子 内 输出 动态 信息 ， 显 示 当 前 盒子 的 宽度 和 高 度 ， 演 示 效 果 
如 图 8.2 所 示 。 


<script> 

window.onload = function(){ 
var box = document.getElementById("box"): /获取 盒子 的 引用 
box.onmouseover = functionO{ /定义 鼠标 经 过 时 的 事件 处 理 函 数 


box.style.setProperty("backeround-color", "blue",""):; / 设置 背景 色 为 蓝 色 
box.style.setProperty("border", "solid 50px red", ""): // 设置 边框 为 50 像素 的 红色 实 线 


} 
box.onclick = functionO{ 1/ 定义 鼠标 单 击 时 的 事件 处 理 消 数 
box .InnerHTML = (box.style.item(0) + ":" + box.style.getPropertyValue("width")): 
/ 显示 盒子 的 宽度 
box .nnerHTML = box .mnerHIML+ "<br=>"+ (box.style.ltem(1) 十 ":" 十 box.style.getPropertyValue( "helght )): 
/ 显示 盒子 的 高 度 
} 
box.onmouseout = function(){ /定义 鼠标 移出 时 的 事件 处 理 函 数 
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box.style.setProperty("backeround-color", "red",""); W/W/ 设置 背景 色 为 红色 
box.style.setProperty("border", "solid 50px blue",""); 设置 50 像素 的 蓝 色 实 边框 
} 
上 
</script> 
<dlv 1d="box" style="width: 100px: height:100px: backeround-color:red: border:solld $0px blue:">< dv> 


区 
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默认 显示 效果 鼠标 经 过 效果 鼠标 单 击 效果 
图 8.2 设计 动态 交互 样式 戏 来 


【示例 S】 针 对 示例 4， 使 用 快捷 方法 设计 相同 的 交互 效果 ， 这 样 能 够 兼容 早期 正 浏 览 器 ， 页 面 代 码 
如 下 : 


<script> 

window.onload = function( ){ 
var box = document.getElementByld("box"):; /获取 盒子 的 引用 
box.onmouseover = function( ){ 


box.style.backeroundColor = "blue": 1/ 设置 背景 样式 


box.style.border = "solid S50px red": /设置 边框 样式 
} 
box.onclick = function(O{ 1/ 读 取 并 输出 行内 样式 
box .InnerHTML = “width:" + box.style.width:; 
box .innerHTIML = box .innerHTML+ "<br>"+ "height:" + box.style.height: 
} 
box.onmouseout = function(O { /1 设计 鼠标 移出 之 后 ， 恢 复 默 认 样 式 
box.style.backeroundColor = "red": 
box.style.border = "solid SO0px blue": 
} 
} 
</script> 


<dv 1d="box" style="wldth:100px: height: 1 00px: backeround-color:red:; border:solld $0px blue:"></dIv> 


【拓展 】 

韭 正 浏览 带 也 支持 style 快捷 访问 方式 ,但 是 它 无 法 获取 style 对 象 中 指定 序号 位 置 的 属 
性 名 称 ， 此 时 可 以 使 用 cssText 属性 读 取 全 部 style 属性 值 ， 借 助 JavaScript 方法 把 返回 字符 串 
劈 开 为 数组 。 详 细 内 容 请 扫 码 阅读 。 
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8.1.3 使 用 styleSheets 


在 DOM 2 级 样式 规范 中 ，CSSStyleSheet 表示 样式 表 ， 包 括 通过 <link> 标签 包含 的 外 部 样式 表 和 在 
<style> 标签 中 定义 的 内 部 样式 表 。 虽 然 这 两 个 元 素 分 别 由 HIMLLinkElement 和 HIMLStyleElement 类 型 表 
示 ， 但 是 样式 表 接 口 是 一 致 的 。 

CSSStyleSheet 继承 自 StyleSheet。StyleSheet 作为 基础 接口 还 可 以 定义 非 CSS 样式 表 。CSSStyleRule 类 
型 表示 样式 表 中 的 每 条 规则 ，CSSRule 对 象 是 它 的 实例 。 

使 用 document 对 象 的 styleSheets 属性 可 以 访问 样式 表 ， 包 括 适 应 <style> 标签 定义 的 内 部 样式 表 ， 以 
及 使 用 <link> 标签 或 @import 命令 导入 的 外 部 样式 表 。 

styleSheets 对 象 为 每 个 样式 表 定义 了 一 个 cssRules 对 象 ， 用 来 包含 指定 样式 表 中 所 有 的 规则 ( 样式 )。 
但 是 正 浏 览 器 不 支持 cssRules 对 象 ， 而 支持 rules 对 象 表示 样式 表 中 的 规则 。 

兼容 主流 浏览 如 的 方法 如 下 : 

Var cssRules = document.styleSheets[0|.cssRules || document.styleSheets|0|.rules.: 


在 上 面 代码 中 ， 先 判断 浏览 器 是 否 支 持 cssRules 对 象 ， 如 果 支 持 则 使 用 cssRules ( 非 正 浏览 器 )， 否则 
使 用 rules (IE 浏览 器 )。 

【示例 1】 通 过 <style> 标签 定义 一 个 内 部 样式 表 ， 为 页 面 中 的 <div id="box"> 标签 定义 四 个 属性 : 宽度 、 
高 度 、 背 景色 和 边框 。 然 后 在 脚本 中 使 用 styleSheets 访问 这 个 内 部 样式 表 ， 把 样式 表 中 的 第 一 个 样式 的 所 
有 规则 读 取 出 来 ， 在 盒子 中 输出 显示 ， 如 图 8.3 所 示 。 


<style type="teXt css" > 
#box { 
width: 400px; 
height: 200px; 
backeround-color:#BFFBS8F: 
border: solid 1px blue: 
b 
</style> 
<script> 
window.onload = function()1{ 
var box = document.sgetElementById("box"): 
// 判断 浏览 紫 类 型 
Var cssRules = document.styleSheets[0|].cssRules || document.styleSheets|0|.mles: 
box.innerHTMI = "<h3> 盒子 样式 </h3>" 
// 读 取 cssRules 的 border 属性 
box.innerHTML += "<br> 边框 : "十 cssRules[0].style.border: 
/ 儿 读 取 cssRules 的 backeroundColor 属性 
box.innerHTML += "<br> 背景 : " + cssRules[0].style.backeroundColor: 
1/ 读 取 cssRules 的 height 属性 
box.innerHTML += "<br> 高 度 : " + cssRules[0].style.height: 
// 读 取 cssRules 的 width 属性 
box.innerHTML += "<br> 宽度 : "十 cssRules[0].style.width: 
} 
</script> 
<div 1d=—"box"></dIv> 
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边框 :lpg solid blue 
背景 : rgb(191, 251, 143) 


图 8.3 使 用 styleSheets 访问 内 部 样式 表 


六 提示 : cssRules (或 rules ) 的 style 对 象 在 访问 CSS 属性 时 ,使 用 的 是 CSS 脚本 属性 名 ， 因 此 所 有 属 
性 名 称 中 不 能 使 用 连 字 符 。 例 如 : 
cssRules|0|.style.backeroundColor: 
这 与 行内 样式 中 的 style 对 象 的 setProperty() 方法 不 同 。setProperty0 方法 使 用 的 是 CSS 属 
性 名 。 例 如 : 
box.style.setProperty("backeround-color", "blue", ™"): 


”styleSheets 包含 文档 中 所 有 样式 表 ， 每 个 数组 元 素 代表 一 个 样式 表 ， 数 组 的 索引 位 置 是 根据 样式 表 在 广 
” 档 中 的 位 置 决 定 的 。 每 个 <style> 标签 包含 的 所 有 样式 表示 一 个 内 部 样式 表 ， 每 个 独立 的 CSS 文件 表示 一 
“个 外 部 样式 表 。 
【示例 2】 演 示 如 何 准 确 找 到 指定 样式 表 中 的 样式 属性 。 
第 1 步 ， 启 动 Dreamweaver， 新 建 CSS 文件 ， 保 存 为 stylel.css ， 存 放 在 根 目录 下 。 

第 2 步 ， 在 stylel.css 中 输入 下 面 样式 代码 ， 定 义 一 个 外 部 样式 表 。 

(Veharset "utf-8"; 

body { color:black: } 

p { color:eray: } 

dv { color:white: } 

第 3 步 ， 新建 HTML 文档 ,保存 为 test.html， 保 存在 根 目录 下 。 

第 4 步 ,使 用 <style> 标签 定义 一 个 内 部 样式 表 ， 设 计 如 下 样式 。 


<style type="text/css"> 
#box { color:ereen: } 
Ted { color:red: } 

.blue { color:blue: } 
</style~> 


第 5 步 ， 使 用 <link> 标签 导 人 外 部 样式 表 文 件 stylel.css。 
<link href="stylel.css" rel="stylesheet" type="text/css" media="all" /> 


第 6 步 ， 在 文档 中 插入 一 个 <div id="box"> 标签 。 
<div 1d="box"><J/dIv> 
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第 7 步 ,使 用 <script> 标签 在 头 部 位 置 插入 一 段 脚本 。 设 计 在 页 面 初始 化 完毕 后 ， 使 用 styleSheets 访 

问 文档 中 第 二 个 样式 表 ， 然 后 访问 该 样式 表 的 第 一 个 样式 中 的 color 属性 。 | 

<script> | 
window.onload = function(){ 

Var cssRules = document.styleSheets| 1] |.cssRules || document.styleSheets| 1 |.rules: 


Var box = document.getElementById("box"): 


box.innerHTML = "第 二 个 样式 表 中 第 一 个 样式 的 color 属性 值 =" + cssRules[0].style.color: 


} 

</script> 

第 8 步 ， 保 行 页 面 ， 整 个 文档 的 代码 请 参考 本 市 示例 源 代 码 。 最 后 ， 在 浏览 带 中 预 完 页 面 ， 可 以 看 到 
访问 的 color 属性 值 为 black， 如 图 8.4 所 示 。 | 


六 


site 半 esthtmmn| 大 二 且 全 攻 o 全 localhost 江 


第 二 个 样式 表 中 第 一 个 样式 的 color 属 性 值 = black 


图 8.4 使 用 styleSheets 访问 外 部 样式 表 


六 提示: 在 示例 2 中 ，styleSheets[1] 表示 外 部 样式 表 文 件 ( stylel.css )，cssRules[0] 表示 外 部 样式 表 文 件 
中 的 第 一 个 样式 。cssRules[0].style.color 可 以 获取 外 部 样式 表 文 件 中 第 一 个 样式 中 的 color 属性 
的 声明 值 。 反 之 ， 如 果 把 <link> 标签 放置 在 内 部 样式 表 的 上 面 ， 即 代码 如 下 : 

<head> 

<link href—"stylel.css" rel="stylesheet" type="text/css" media="all" /> 

<style type="text/css"> 

#box { color:ereen: } 

Ted { color:red; } 

blue { color:blue; } 

</style> 

</head> 

上 面 脚本 将 返回 内 部 样式 表 中 第 一 个 样式 中 的 color 属性 值 ， 即 为 green。 如 果 把 外 部 样式 
表 转 换 为 内 部 样式 表 ， 或 者 把 内 部 样式 表 转 换 为 外 部 样式 表 文 件 ， 不 会 影响 styleSheets 的 访问 。 
因此 ,样式 表 和 样式 的 索引 位 置 是 不 受 样式 表 类 型 ， 以 及 样式 的 选择 符 限制 的 。 任 何 类 型 的 样 
式 表 (不 管 是 内 部 的 ， 还 是 外 部 的 ) 都 在 同一 个 平台 上 按 在 文档 中 解析 位 置 进行 索引 。 同 理 ， 
不 同类 型 选择 符 的 样式 在 同一 个 样式 表 中 也 是 根据 先后 位 置 进行 索引 。 


【拓展 ]】 

StyleSheets 对 象 代表 网 页 的 一 张 样式 表 ， 它 包括 <link> 节点 加 载 的 样式 表 和 <style> 节点 
内 概 的 样式 表 。document 对 象 的 styleSheets 属性 ， 可 以 返回 当前 页 面 的 所 有 StyleSheets 对 象 
( 所 有 样式 表 )。 详 细 说 明 请 扫 码 阅读 。 
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8.1.4 使 用 selectorText 


每 个 CSS 样式 都 包含 selectorText 属性 ， 使 用 该 属性 可 以 获取 样式 的 选择 符 。 
【 示例 】 使 用 selectorText 属性 获取 第 一 个 样式 表 (styleSheets[0] ) 中 的 第 三 个 样式 (cssRules[2] ) 的 选 
择 符 ， 输 出 显示 为 “.blue”， 如 图 8.5 所 示 。 


<style type="text/css"> 
#box { color:ereen; } 
.Ted { color:red: } 
.blue { color:blue:; + 
</style> 
<link href—"stylel.css" rel="stylesheet" type="text/css" media="all" /> 
<script> 
window.onload = function( ){ 
var cssRules = document.styleSheets|0|.cssRules || document.styleSheets|0|.rules; 
var box = document.getElementById("box"): 
box.innerHTML = "第 一 个 样式 表 中 第 三 个 样式 选择 符 =" + cssRules[2].selectorText: 
</script> 
<dv 1d="box"></dIv> 


EE 


= | 和 htipyilocalhostim 户 ~ 民 必 各 loclhos >x 属 


第 一 个 样式 表 中 第 三 个 样式 选择 符 = .bhue 


图 8.5 使 用 selectorText 访问 样式 选择 符 


【拓展 】 
每 条 CSS 规则 的 样式 声明 部 分 ( 大 括号 内 部 的 部 分 )， 都 是 一 个 CSSStyleDeclaration 对 
象 ， 每 条 CSS 属性 都 是 CSSStyleDeclaration 对 象 的 属性 。 关 于 该 对 象 的 详细 说 明 请 扫 人 码 阅 读 。 


8.1.5 修改 样式 


cssRules 的 style 对 象 不 仅 可 以 访问 属性 ， 还 可 以 设置 属性 值 。 
【 示例】 样式 表 中 包含 三 个 样式 ， 其 中 蓝 色 样式 类 ( .blue ) 定义 字体 显示 为 赣 色 。 然 后 利用 脚本 修改 该 
样式 类 ( .blue 规则 ) 字体 颜色 显示 为 浅 灰 色 ( #999 )， 最 后 显示 效果 如 图 8.6 所 示 。 


<style type="text/css"> 
#box { color:ereen: } 
.Ted { color:red: } 
.blue { color:blue: } 
</style> 
<script> 
window.onload = function(){ 
var cssRules = document.styleSheets[0|.cssRules | document.styleSheets[0|.rules: 
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cssRules[2].style.color="#999": / 修改 样式 表 中 指定 属性 的 值 
} 
</script> 
<p class="blue"> 原 为 蓝 色 字体 ， 现 在 显示 为 浅 灰 色 。</p> 


Eb 


ve a = EC ocalhost 


原 为 蓝 色 字体 ， 现 在 显示 为 法 灰色 . 


图 8.6 修改 样式 表 中 的 样式 


六 提示 : 使 用 上 述 方法 修改 样式 表 中 的 类 样式 ， 会 影响 其 他 对 象 或 其 他 文档 对 当前 样式 表 的 引用 ， 因 此 
在 使 用 时 请 务必 谨慎 。 
【拓展 】 
一 条 CSS 规则 包括 两 个 部 分 : CSS 选择 器 和 样式 声明 。CSS 规则 部 界 了 三 个 接口 : CSSRule 
接口 、CSSStyleRule 接口 和 CSSMediaRule 接口 。 详 细 说 明 请 扫 码 阅读 。 


8.1.6 ”添加 样式 


addRule( 方法 可 以 为 样式 表 增 加 一 个 样式 。 用 法 如 下 : 
styleSheet.addRule(selector,style,|[index|) 


styleSheet 表示 样式 表 引 用 ， 参 数 说 明 如 下 : 
加 selector: 表示 样式 选择 符 ， 以 字符 串 的 形式 传递 。 
加 ”style: 表示 具体 的 声明 ， 以 字符 串 的 形式 传递 。 
町 index: 表示 一 个 索引 号 ， 即 添加 样式 在 样式 表 中 的 索引 位 置 ， 默 认为 -1， 表 示 位 于 样式 表 的 末尾 ， 
该 参数 可 以 不 设置 。 
Firefox 浏览 顶 不 文 持 addRule0 方法 ， 但 是 文 持 使 用 insertRule0 方法 添加 样式 。insertRule0 方法 的 用 
法 如 下 : | 


styleSheet.insertRule(rule,[index|) 


参数 说 明 如 下 : 

回 mle: 表示 一 个 完整 的 样式 字符 串 。 

加 ”index: 与 addRule0 方法 中 的 index 参数 作用 相同 ， 但 默认 为 0， 放置 在 样式 表 的 末尾 。 

【示例 】 先 在 文档 中 定义 一 个 内 部 样式 表 ， 然 后 使 用 styleSheets 集合 获取 当前 样式 表 ， 利 用 数组 默认 属 
性 length 获取 样式 表 中 包含 的 样式 个 数 。 最 后 在 脚本 中 使 用 addRuleO (或 insertRuleO ) 方法 增加 一 个 新 样 | 
式 ， 样 式 选择 符 为 p， 样 式 声 明 为 背景 色 为 红色 ,字体 颜色 为 白色 ， 段 落 内 部 补 白 为 一 个 字体 大 小 。 保 存 
页 面 ， 在 浏览 器 中 预览 ， 显 示 效 果 如 图 8.7 所 示 。 


<style type="text/css"> 
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#box { color:ereen: } 
.Ted { colorTed: } 
.blue { color:blue: } 
</style~> 
<script> 
window.onload = function(){ 
var styleSheets = document.styleSheets[0]: V 获取 样式 表 引 用 


var index = styleSheets.length: /1 获取 样式 表 中 包含 样式 的 个 数 
if(styleSheets.insertRule){ 1/ 判断 浏览 器 是 否 支 持 insertRule0 方法 
styleSheets.insertRule("p{backeround-color:red:color:#{it:paddine: lem:}", index): 
lelsef // 如 果 不 支 持 insertRule( 方法 
styleSheets.addRule("P", "backeround-color:red:;color:#fff:paddng: lem:", mdex): 
} 
} 
</script> 
<p> 在 样式 表 中 增加 样式 操作 </p> 


二 eal 2 htip:i/localhostimysite test.html 


在 样式 表 中 增加 样式 探 作 


冯 必 (FEN 禁用 (S| 查 者 IV| 图 舍 四 每 帮 (CO 工具 (T 验证 (A] | 浏 星 才 模式 E10[8) 区 辣 模式 M}: 夺 是。 
| HTML | Css 控制 各 ”脚本 探查 器 ”网 络 


RR 耻 园 分 症 国 芭 


een. 4 red fF eofpr redt. 4 blya 了 Peer tive.. 上 | paddinge1s +t: lam; 


ba -Er a Und cal or: ced. 


|】 
全 下 立 荡 芒 点 


图 8.7 为 段落 文本 增加 样式 


在 上 面 代码 中 ， 使 用 insertRule0 方法 在 内 部 样式 表 中 增加 一 个 p 标签 选择 符 的 样式 ， 
表 的 末尾 。 设 置 段落 背景 色 为 红色 ， 字 体 颜 色 为 日 色 ， 补 白 为 一 个 字体 大 小 。 

【拓展 】 

添加 样式 表 有 两 种 方式 : 一 种 是 添加 一 张 内 置 样 式 表 ， 即 在 文档 中 添加 一 个 <style> 节点 
男 一 种 是 添加 外 部 样式 表 ， 即 在 文档 中 添加 一 个 <link> 节点 ， 然 后 将 href 属性 指 向 外 部 样式 0 He 
表 的 URL。 详 细 说 明 请 扫 码 阅读 。 a 


8.1.7 访问 泻 染 样式 


行内 样式 (inline style ) 具有 最 高 的 优先 级 ， 改 变 行内 样式 ， 通 常会 立即 反映 出 来 。 但 是 ， 网 页 元 素 最 
终 的 样式 是 综合 各 种 规则 计算 出 来 的 。 因 此 ， 如 果 想 得 到 元 素 现 有 的 样式 ， 只 读 取 行内 样式 是 不 够 的 ， 需 
要 得 到 浏览 器 最 终 计 算出 来 的 那个 样式 规则 。window.getComputedStyle0 方法 ， 就 用 来 返回 这 个 规则 。 该 
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方法 接收 一 个 DOM 节点 对 象 作 为 参数 ， 返 回 一 个 包含 该 节点 最 终 样式 信息 的 对 象 。 所 谓 “最 终 样式 信息 ”， 
指 的 是 各 种 CSS 规则 羞 加 后 的 结果 
DOM 定义 了 一 个 方 溉 :帮助 用 户 速 检 测 当前 对 象 的 最 后 显示 样式 ， 不 过 正 游览 
的 方法 不 同 。 分 别 说 明 如 下 : 
1.， IE 浏览 
IE 浏览 锅 定 义 了 一 个 currentStyle 对 象 ， 该 对 象 是 一 个 只 读 对 象 。currentStyle 对 象 包含 了 文档 内 所 有 元 
素 的 style 对 象 定 义 的 属性 ， 以 及 任何 未 被 覆盖 的 CSS 规则 的 style 属性 。 
【示例 1】 针 对 8.1.6 节 示 例 ， 为 类 样式 blue 增加 一 个 背景 色 为 白色 的 声明 ， 然 后 把 该 类 样式 应 用 到 段 
落 文本 中 。 
<style type="text/css"> | 
#box { color:ereen: } 
Ted { color:red: } | 
.blue {color:blue: backeround-color:#FFFFFF:} | 
</style> 
<script> 
window.onload = function(){ | 
var styleSheets = document.styleSheets[0]: 获取 样式 表 引 用 


var index = styleSheets.length: /获取 样式 表 中 包含 样式 的 个 数 
if(styleSheets.insertRule){ 1/ 判断 浏览 右 是 否 文 持 insertRule0 方法 | 
styleSheets.1nsertRule("p{backeround-color:red:color:#iit:padding: lem:!", Index): | 

Yelse{ 1/ 如 果 浏 览 带 不 文 持 insertRule0 方法 | 
styleSheets.addRule("P", "backeround-color:red:color:#f{ff:padding: lem:", Indexy): | 

} | 

1 
</script> | 


<p class="blue"> 在 样式 表 中 增加 样式 操作 </p> 


在 浏览 右 中 预览 ， 会 发 现 脚本 中 使 用 insertRule0 ( 或 addRule0 ) 方法 添加 的 样式 


| 
无 效 ， 效 果 如 图 8.8 
] 


项 I 

| 

: | 

说 = 名 http://localhost/ rmysitertest.htrml 局 = 蚊 已 党 lacalhest pe 站 站 | 
| 


在 样式 表 中 增加 样式 操作 | 


交 件 昌 ”下 拒 (N】 琶 用 人 理 看 (V) 图 你 上 深 存 IC) 工具 [站 验证 内) | 浏览 澡 模 式 : IE10[B) 文档 模式 ({M): 标准 -中 Xx 
| HTML | Css 控 计 台 忆 相 近 基 网 各 
已 左 国 村 有 加 回 国 [ER 布局。 导 性 
7 = 1. blun tact. btml | 
i olor: blu I 
Fe i nd nolor: rah li55, ?55, 255): 


EEN, J. res [ reler.reg J five 了 Prior. TIE， 


- 二 交 关上 


图 8.8 背景 样式 重 三 后 的 效果 | 
使 用 currentStyle 对 象 获 取 当 前 p 元 素 最 终 显示 样式 ， 这 样 就 可 以 找到 添加 样式 失效 的 原 
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【示例 2】 把 示例 1 另存 为 testl.html， 然 后 在 脚本 中 添加 代码 ， 使 用 currentStyle 获取 当前 段落 标签 <p> 
的 最 终 显 示 样 式 ， 效 果 如 图 8.9 所 示 。 


<script> 
window.onload = function(){ 
var styleSheets = document.styleSheets[0]: / 获取 样式 表 引 用 
var index = styleSheets .length: /获取 样式 表 中 包含 样式 的 个 数 
ifstyleSheets.insertRule){ 1/ 判断 是 否 支持 insertRule0， 支 持 则 调用 ， 否 则 调用 addRule 
styleSheets.InsertRule("p{backeround-color:red:color:#tif:paddine: lem:}", Index): 
relset{ 
styleSheets.addRule("P", "backeround-color:red:color:#iif:padding: lem:", index): 
} 


var p = document.getElementsByTaeName("p")|0l: 
p.innerHTML =" 背景 色 : "+p.currentStyle.backeroundColor+"<br> 字体 颜色 : "+p.currentStyle.color: 


} 
</script> 


SS renamp-edl seo “* 周 


背景 色 : ER 


字体 颜色 . blue 


图 8.9 在 正 浏 览 融 中 获取 p 元素 的 显示 样式 


在 上 面 代码 中 ， 先 使 用 getElementsByTagName0 方法 获取 段落 文本 的 引用 。 然 后 调用 该 对 象 的 currentStyle 
子 对 象 ， 并 获取 指定 属性 的 对 应 值 。 通 过 这 种 方式 ,会 发 现 添加 的 样式 被 blue 类 样式 履 盖 ， 这 是 因为 类 选 
择 符 的 优先 级 大 于 标签 选择 符 的 样式 。 

2. 非 IE 浏 览 

DOM 定义 了 一 个 getComputedStyle0 方法 ， 该 方法 可 以 获取 目标 对 象 的 最 终 显 示 样 式 ， 但 是 它 需 要 使 用 
document.defaultView 对 象 进行 访问 。 

getComputedStyle0 方法 包含 了 两 个 参数 : 第 一 个 参数 表示 元 素 ， 用 来 获取 样式 的 对 象 ; 第 二 个 参数 表 
示 伪 类 字符 串 ， 定 义 显示 位 置 ， 一 般 可 以 省 略 ， 或 者 设置 为 null。 

【示例 3】 针 对 示例 2， 为 了 能 够 兼容 非 正 浏览 禹 ， 下 面 对 页 面 脚本 进行 修改 。 使 用 让 语句 判断 当前 浏览 
伪 是 否 支 持 document.defaultView， 如 果 支 持 则 进一步 判断 是 否 支 持 document.defaultView.getComputedStyle0， 
如 果 支 持 则 使 用 getComputedStyle0 方法 读 取 最 终 显 示 样 式 ; 否则 ， 判 断 当 前 训 览 需 是 否 文 持 currentStyle， 
如 果 文 持 则 使 用 它 读 取 最 终 显示 样式 。 

<style type="text/css"> 

#box { color:ereen; } 


Ted { color:red. } 
.blue {color:blue: backeround-color:#FFFFFF:} 


</style> 
<script> 
window.onload = function( ){ 
var styleSheets = document.styleSheets[0]: 1/ 获取 样式 表 引 用 指针 
var index = styleSheets.length: /获取 样式 表 中 包含 样式 的 个 数 
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if(styleSheets.insertRule){ /判断 浏览 器 是 否 文 持 
styleSheets.InsertRule( fbacksground-colorred:color:#Hittpaddimg:lem: 妆 Index): 
+elset{ 
styleSheets.addRule("P", "backeround-color:red:color:#iif:paddine: lem;:". ndex); 
| 
Varp = document.getElementsByTaeName("p")[0|: 
if( document.defaultView && document.defaultView.getComputedStyle) | 
p.innerHTML = "背景 色 : "+document.defaultView.getComputedStyle(p.null).backeroundColor+"<br> 字 | 
体 颜 色 : "+document.defaultView.getComputedStyle(p,null).color: | 
else 1f( p.currentStyle) | 
p.innerHTML =" 背景 色 : "+p.currentStyle.backeroundColor+"<br> 字体 颜色 : "+p.currentStyle.color: 


else 
p.innerHTML = “" 当前 浏览 带 无 法 获取 最 终 显示 样式 ": 
} 
</script> | 


<p class="blue"> 在 样式 表 中 增加 样式 操作 </p> 
保存 页 面 ， 在 Firefox 浏览 器 中 预览 ， 则 显示 效果 如 图 8.10 所 示 。 


httpsWlocalhost,,ysitetsst2Jhtml 9 | 
| 


亨 localhostirnysitertestZhtm 天 识字 | 图 莒 局 «Ctlrk P| 蝇 » | 


背 明 名 :rgb(255, 255, 255) 
字体 颜色 : rgb(0Q, 0, 255) | 
| 


图 8.10 在 Firefox 浏览 右 中 获取 op 元素 的 显示 样式 
【拓展 】 
DOM 节点 的 style 对 象 无 法 谈 写 伪 元 系 的 样式 ， 这 时 就 要 用 到 window 对 和 象 的 
getComputedStyle0 方法 。 详 细 说 明 请 扫 码 阅读 。 


8.1.8 访问 嫁 体 查询 


使 用 windowmatchMedia0 方法 可 以 检查 CSS 的 MediaQuery 语句 。 各 种 浏览 器 的 最 新 版 本 ( 包括 正 10+) / 
孝文 持 该 方法 ， 对 于 不 文 持 该 方法 的 旧版 浏览 项 ， 可 以 使 用 第 三 方 图 数 库 matchMedia.js。 | 
CSS 的 MediaQuery 语句 有 点 像 直 语句， 只 要 显示 媒介 (包括 浏览 带 和 屏 货 等 ) 满足 妹 体 查询 语句 设 定 
的 条 件 ， 就 会 执行 区 块 内 部 的 语句 。 | 
【示例 1】 下 面 是 MediaQuery 语句 的 一 个 例子 。 
(Vmedia all and (max-width: 700pX) { 
body 1{ 
backeround: #FF0: | 
} 
} 


上 面 的 CSS 代码 表示 ， 该 区 块 对 所 有 媒介 ( media ) 有 效 ， 且 视 口 的 最 大 宽度 不 得 超过 700 像素 。 如 
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果 条 件 满足 ， 则 body 元 素 的 背景 设 为 三 F0。 
< 所 注意 : MediaQuery 接收 两 种 宽度 / 高 度 的 度量 ， 一 种 是 上 例 的 “ 视 口 ”的 宽度 / 高度， 还 有 一 种 是 “ 设 


备 ” 的 宽度 / 高度。 例如 : 
(media all and (max-device-width: 700px) { 
body 
backeround: #EFF0: 
| 
| 


视 口 的 宽度 /高 度 (width/height ) 使 用 documentElement.clientWidth/clientHeight 来 衡量 ， 
单位 是 CSS 像素 ;设备 的 宽度 /高度 ( device-width/device-height ) 使 用 screen.width/height 来 衡量 ， 
单位 是 设备 硬件 的 像素 。 


window.matchMedia( 方法 接收 一 个 MediaQuery 语句 的 字符 串 作 为 参数 ， 返 回 一 个 MediaQueryList 对 
。 该 对 象 有 以 下 两 个 属性 。 

回 media: 返回 所 查询 的 MediaQuery 语句 字符 串 。 

加 matches: 返回 一 个 布尔 值 ， 表 示 当 前 环境 是 否 匹 配 查询 语句 。 


var result = window.matchMedia('(min-width: 600px)'): 
result.media (mlIn-wWlidth: 600px) 
result.matches //tme 


【示例 2】 下 面 示例 根据 MediaQuery 是 否 匹 配 当 前 环境 ， 执 行 不 同 的 JavaScript 代码 。 


var result = window.matchMedia('(max-width: 700px)'): 
1f (result.matches) { 
console.log(' 页 面 宽度 小 于 等 于 700px"): 
} else { 
console.log( 页 和 面 蜗 度 大 于 700px"); 
} 


【示例 3】 下 面 示例 根据 MediaQuery 是 否 匹 配 当 前 环境 ， 加 载 相 应 的 CSS 样式 表 。 


var result = window.matchMedia("(max-width: 700pX)”): 

1f (result.matches){ 
var linkElm = document.createElement( link’): 
lnkElm.setAttnbute(rel', 'stylesheet'): 
linkElm.setAttribute('type', 'text/css'): 
linkElm.setAttnbute('href, ‘small.css'): 
document.head.appendChild(ImkElm): 

lL 


< 们 注意 ; 如 果 window.matchMedia0 无 法 解析 MediaQuery 参数 ， 返 回 的 总 是 false， 而 不 是 报错 。 例如: 


window.matchMedia('bad strmp ).matches //false 


window.matchMedia0 方法 返回 的 MediaQueryList 对 象 有 两 个 方法 : addListener0 方法 和 removeListener(0 


方法 ， 用 来 监听 事件 。 如 有 果 MediaQuery 查询 结果 发 生变 化 ， 就 调用 指定 的 回调 也 数 。 
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例如 : 
var mql = window.matchMedia("(max-width: 700px)"): 
/指定 回调 函数 
mql.addListener(mqCallback): 
/撤销 回调 函数 
mql.removeListener(mqCallback): 
tunction mqCallback(mql) { 
if (mql.matches) { 
/ 宽度 小 于 等 于 700 像素 
1 else { 
/宽度 大 于 700 像素 


} 
} 
上 面 代码 中 ， 回 调 函 数 的 参数 是 MediaQueryList 对 象 。 回 调 函 数 的 调用 可 能 存在 两 种 情况 : 一 种 是 显 
示 宽度 从 700 像素 以 上 变 为 以 下 ; 另 一 种 是 从 700 像素 以 下 变 为 以 上 。 因 此 ， 在 回调 函数 内 部 要 判断 一 下 当 
前 的 屏幕 宽度 。 | 


8.1.9 CSS 事件 


1.，transitionend 事件 

CSS 的 过 渡 效 果 ( transition ) 结束 后 ， 触 发 transitionend 事件 。 例 如 : 
el.addEventListener('transitionend', onTransitionEnd, false): 

function onTransitionEnd() { 


console.log("Transition end'): 


} 


transitionend 事件 的 对 象 具 有 以 下 属性 。 

加 ”propertyName: 发 生 transition 效果 的 CSS 属性 名 。 
加 ”elapsedTime: transition 效果 持续 的 秒 数 ， 不 含 transition-delay 的 时 间 。 
回 pseudoElement: 如 果 transition 效果 发 生 在 伪 元 素 ， 会 返回 该 伪 元 素 的 名 称 ， 以 “::” 开 头 。 如 果 不 

发 生 在 伪 元 素 上 ， 则 返回 一 个 空 学 符 串 。 
实际 使 用 transitionend 事件 时 ， 可 能 需要 添加 浏览 旭 前 级 。 
el.addEventListener('WwebkitIransitionEnd', function () { 
el.style.transition = mone ': 


IF 


2. animationstart、animationend 和 animationiteration 事件 

CSS 动画 有 以 下 三 个 事件 。 

加 animationstart 事件 : 动画 开始 时 触发 。 

回 animationend 事件 : 动画 结束 时 触发 。 

加 animationiteration 事件 : 开始 新 一 轮 动画 循环 时 和 触发。 如果 animation-iteration-count 属性 等 于 1, 该 
事件 不 触发 ， 即 只 播放 一 轮 的 CSS 动画 ， 不 会 触发 animationiteration 事件 。 | 

例如 : | 
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div.addEventListener(‘animationiteration', function() { 
console.log(' 完成 一 次 动画 "): 
}): 
这 三 个 事件 的 事件 对 象 ， 都 有 animationName 属性 ( 返回 产生 过 渡 效 果 的 CSS 属性 名 ) 和 elapsedTime 
属性 ( 动画 已 经 运行 的 秒 数 )，、 对 于 animationstart 事件 ，elapsedTime 属性 等 于 0， 除 非 animation-delay 属 
性 等 于 负 值 。 例 如 : 


var el = document.getElementById("animation"); 
el.addEventListener("animationstart", listener, talse): 
el.addEventListener("animationend", listener, false): 
el.addEventListener("animationiteration", listener, talse): 
function listener(e) { 
var li = document.createElement("]1"); 
switch(e.type) { 
case "animationstart": 
li.innerHTML = "Started: elapsed time ls " + e.elapsedTime: 
break: 
case "animationend": 
li.innerHTML = "Ended: elapsed time 1s " + e.elapsed Time: 
break: 
case "anmationiteration": 
li.innmerHIML = "New loop started at time " + e.elapsedTime: 
break: 
} 
document.getElementByld("“output").appendChiuld(1): 
} 


上 面 代码 的 运行 结果 如 下 : 


Started: elapsed tme 1s 0 

New loop started at tme 3.01200008392334 
New loop started at tme 6.00600004196167 
Ended: elapsed time 1s 9.234000205993652 


animation-play-state 属性 可 以 控制 动画 的 状态 (暂停 /播放 )， 该 属性 需要 加 上 浏览 硕 前 绥 。 


element.style.weblitAnimationPlayState = "paused": 
element.style.webkitAnimationPlayState = "running"; 


【拓展 】 
CSS 的 规格 发 展 太 快 ， 新 的 模块 层出不穷 。 如 何 知 道 当 前 浏览 船 是 否 文 持 茶 个 模块 ， 许 
细 说 明 请 扫 码 阅读 。 


8.2 jQuery 实现 


CSS 属性 值 可 以 支持 数字 、 百 分 比 或 关键 字 等 ， 还 需要 处 理 不 同 的 取 值 单位 ; 在 读 取 属性 当前 值 时 ， 
不 同 的 浏览 器 可 能 返回 不 同 的 单位 值 ， 用 户 无 法 简单 地 处 理 ; 在 能 否 读 取 高 、 宽 等 位 置信 息 上 ， 还 会 受到 
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display 状态 的 影响 ; 不 同 浏览 器 ， 相 同 功能 对 应 的 属性 名 不 同 ， 可 能 带 有 私有 前 绷 等 。 | 
在 jQuery 框架 中 ，CSS 模块 的 主要 功能 是 解决 上 述 各 种 问题 ， 除 了 常规 的 CSS 样式 读 写 之 外 ， 主 要 是 
服务 animation 模块 。 本 节 将 具体 介绍 jQuery 操作 CSS 的 方法 ， 以 及 基本 源码 设计 思路 。 | 
jQuery 实现 了 一 套 简 单 统一 的 样式 读 取 与 设置 的 机 制 。 
加 ” 读 取 : $(selector).css(prop)。 
四 写 入 : $(selector).css(prop, value)。 
也 支持 对 象 参数 、 上 映射 写 人 方式 。 同 时 这 种 击 单 、 高 效 的 用 法 完全 不 用 考虑 兼容 性 的 问题 ， 甚 至 包括 
那些 需要 加 上 前 缀 的 CSS3 属性 。 例 如 : | 


放 读 取 */ 
$(#div1").css(lineHeight") 
记号 入 */ 


$(#div1").css(lineHeight', "30px") 
/映射 (这 种 写法 其 实 容易 产生 bug， 不 如 下 面 一 种 ， 后 文 会 讲 到 ) 
$(#dv1").css(lneHeieht', function(index, value) { 

return (+value || 0) + '30px': 


}) 
// 增 量 ( 只 支持 +、-， 能 够 自动 进行 单位 换算 ， 正确 囚 加 ) 
$(#div1").css(lineHeight', +=30px') 
// 对象 写法 
$(#div1").css({ 
‘JneHelight': +=30pX'" ， 
'tontS1ize': "24pX' 
D1 
如 何 统一 一 个 具有 众多 兼容 问题 的 系统 呢 ? 
jQuery 的 思路 是 抽象 一 个 标准 化 的 流程 ， 然 后 对 每 个 可 能 存在 例外 的 地 方 安放 钩子 ， 对 于 需要 例外 的 
情形 ， 只 需 外 部 定义 对 应 的 钩子 即 可 调整 执行 过 程 ， 即 “标准 化 流程 + 钩子 "。 


8.2.1 access() 函数 


jQuery.fn.css(name, value) 可 读 取 和 写 人 样式 ， 属 于 对 外 开放 的 高 级 方法 。 内 部 的 核心 方法 是 
JQuery.css(elem, name, extra, styles)、]Query.style(elem, name, Value, extra)。 

jQuery 链 式 调用 、 对 和 象 写法 、 上 映射 、 无 value 则 查询 等 特点 套用 在 很 多 API 上， 这些 API 分 为 两 类 。 

四 JQuery.fn.css(name, value) 

加 jQuery.fn.html(value) 

jQuery.fn.html(value) 不 支持 对 象 参 数 写 法 。jQuery 抽 离 了 不 变 的 逻辑 ， 抽 象 为 access(elems, fn, key, 
value, chainable, emptyGet, raw ) 接口 。 

access 是 一 个 多 功能 值 操作 的 内 部 函数 。 它 可 以 使 set/get 方 法 在 一 个 函数 中 体现 。 例 如 ， 和 常用 的 css、 
attr 都 是 调用 了 access 方法 。 例 如 ，css 的 使 用 方法 。 


$(selector).css(key) //get 
$(selector).css(key,valye) //set 
$(selector).css( {keyl:valyel,.key2:value2}) //set 
$(selector).css(functionO{ … }) /set 
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access 的 人 参数 如 下 : 

var access = function (elems, fn, key, value, chainable, emptyGet raw) {1 

加 ”elems: 元 素 集 合 。 

加 ” 血 : 回调 函数 。 

加 | key: 键 。 

回 value: 值 。 

加 ”chainable: 0 表示 读 取 ，1 表示 设置 。 

回 emptyGet: 一 般 不 提供 该 参数 ， 当 没有 元 素 时 返回 undefined。 
回 Iaw: 如 果 是 字符 串 ， 则 为 真 ; 如 果 是 图 数 ， 则 为 假 。 


大 致 了 解 各 参数 后 ， 再 看 它 的 返回 值 。 当 chainable 为 1 时 ， 表 示 设 置 ， 直 接 返回 元 素 集 合 ， 方 便 链 式 


调用 ， 为 0 时 表示 获取 。 


// 如 果 是 链 式 ， 返 回 jQuery 对 象 
1f (chamable) { 
return elems: 


b 

// 获取 值 

f(bulk) {//key 为 undefined 或 者 null 
retum fn.call(elems): 


} 
// 如 果 jQuery 对 象 有 长 度 ， 获 取 对 象 第 一 个 元 素 的 键 值 ， 否 则 返回 emptyGet 
retumn len ? fn(elems[0|, key) : emptyGret: 


在 获取 的 部 分 又 做 了 判断 ，bulk 是 什么 ， 回 到 access 开头 部 分 就 知道 了 : 
bulk = key — null 


当 没 有 ey 的 时 候 ，bulk 为 真 ， 所 以 会 执行 血 .call( elems )， 否 则 执行 “length ? fhn( elems[0], key ) : 


emptyGet;”; 当 bulk 为 假 时 ， 先 判断 元 素 是 否 有 长 度 ， 如 果 有 ， 则 执行 回调 ， 否 则 返回 undefined。 


出 ， 


了 解 get 后 ， 继 续 看 set。set 有 以 下 3 种 形式 : 
加 ” 键 值 对 : $(selector).css(key,valye)。 
加 ”key 为 对 象 : $(selector).css({keyl:valyel,key2:value2:)。 
加 key 为 图 数 : $(selector).css(functionO{ … Y)。 
在 access 整个 代码 块 ， 除 了 最 底部 是 处 理 get 外 ， 其 余 的 部 分 都 在 处 理 set。 从 下 面 的 代码 片段 可 以 看 
让 处 理 键 为 对 象 ，else 让 处 理 非 对 象 ， 在 else 计 中 又 分 别处 理 当 参数 为 键 值 对 和 key 为 函数 的 两 种 形式 。 
1{ ( key && typeot key = 一 "oblect ) { 
/省 略 部 分 代码 
+ else 1{ ({ value !— undefined ) { 
/ 省略 部 分 代码 
} 


当 键 为 对 象 时 ， 它 的 处 理 方式 是 利用 递归 再 执行 一 次 access。 
1{ ( key && typeotf key =— "object" ) { 
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tor(llmnkey) +{ 
]Query.access( elems, fn, 1, key|1|. 1, emptyGet value ): 


} 
chainable = 1: 
+ else 1{ ( value !— undefined ) { 
/省 略 部 分 代码 
} 


当 键 为 非 对 象 时 ， 先 判断 值 不 为 空 ， 进 入 后 做 了 以 下 4 件 事情 。 
(1 ) 如 果 值 是 函数 ， 则 exec 为 真 。 
(2 ) 如 果 键 为 空 ， 则 值 为 函数 时 做 了 相应 的 处 理 ; 值 为 字符 串 时 执行 回调 。 
(3 ) 循环 元 素 集合 执行 回调 。 
(4) 把 chainable 设置 为 1， 方便 在 return 中 进行 处 理 。 
1 ( Key && typeot key 一 二 "oblect” ) { 
// 省 略 部 分 代码 
} else 1{ ( value !=—— undefined ) { 
exec = pass ——— undefined && JQuery.1sFunction( value ): 
(buk)t{ 
1 (exec ){ 
exec = fn; 
tn = function( elem, key, value ) { 
return exec.call( JQuery( elem ), value ): 


下 
} else { 
fn.call( elems, value ): 
fh = null: 
} 
} 
(fn)it 
for (:1< length:;1t+ ) 1{ 
fn( elems|1|, key, exec ? value.call( elems|1|. 1, fn( elems|1|, key ) ) : value, pass ): 
} 
} 


chaimnable = 1: 


} 


以 上 代码 比较 烦琐 ， 其 实 一 般 情 况 是 直接 进入 第 (3 ) 步 ， 因 为 在 设置 CSS 的 时 候 ，key 都 是 字符 串 ， 
而 第 (2 ) 步 主 要 就 是 针对 key 为 图 数 的 情形 。 


党 提示 : access 完整 的 代码 请 参考 jQuery 源码 注解 文件 。 
8.2.2 jQuery.fn.css 
jQuery 节点 样式 读 取 以 及 设置 都 是 通过 .css0 方法 来 实现 的 。 定 义 HIML 样式 有 以 下 三 种 方式 。 


回 <link> 外 部 引入 ,也 就 是 定义 CSS 样式 表 文 件 。 
回 ”<style/> 租 人 式 内 部 样式 。 
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加 ”使 用 style 特性 定义 。 

给 一 个 HTML 元 素 设 置 CSS 属性 : 

Var head= document.getElementById("head"): 
head.style.width = "20px"; 

head.style.height = "10px"; 

head .style.display = "block": 


这 是 DOM 2 级 样式 提供 的 API， 这 里 涉及 三 个 问题 ， 也 是 jQuery 内 部 需要 解决 的 兼容 问题 。 
问题 1， 单 一 的 设置 太 采 烦 ， 而 且 每 次 style 一 次 就 等 于 浏览 顶 要 绘制 一 次 ， 不 过 高 级 的 浏览 硕 可 能 会 
合并 style 的 次 数 。 
问题 2，style 只 能 针对 行 类 样式 ， 对 于 link 引入 的 样式 ， 无 法 获取 。 
问题 3， 样 式 属性 名 的 兼容 问题 ， 如 驼峰 、 保 留 字 等 。 
任何 支持 style 特性 的 HIML 元 素 在 JavaScript 中 都 有 一 个 对 象 的 style 属性 ， 其 实 也 是 一 个 实例 ， 但 是 
内 部 属性 命名 采用 的 都 是 驼峰 形式 ， 如 background-image 要 写成 backgroundImage。 其 中 一 个 比较 特殊 的 就 
是 foat， 作 为 保留 字 ， 所 以 就 换 成 cssFloat。 
jQuery 需要 处 理 的 问题 包括 : 参数 传递 、 命 名 规范 、 访 问 规则 、 人 性 能 优化 。 
jQuery.fn.css(name, value) 为 什么 会 有 两 个 核心 方法 呢 ? 因为 样式 的 读 取 和 写 人 不 是 同一 个 方式 ， 而 写 
人 的 方式 有 时 也 会 用 来 读 取 。 
回 ” 读 取 : 依赖 window 的 setComputedStyle0 方法 , 正 6 一 8 依赖 元 素 的 currentStyle0 方法 。 内 联 外 
散 的 样式 部 可 查 到 。 
加 ” 写 入 ;: 依赖 elem.style 的 方式 。elem.style 方式 也 可 以 用 来 查询 ， 但 是 只 能 查 到 内 联 的 样式 。 
因此 ，jQuery 封 妆 了 两 个 方法 : 
MM JQuery.css(elem, name, extra styles) 
四 JQuery.style(elem, name, value, extra) 
前 者 只 读 ， 后 者 可 读 可 写 , 但 是 后 者 的 读 比 较 原 始 ， 返 回 值 可 能 出 现 各 种 单位 ， 而 且 巨 法 查 到 外 骸 样 
式 ， 因 此 jQuery. 包 .css 方法 中 使 用 前 者 读 取 ， 使 用 后 者 写 入 。 
jQuery.extend({ 
css: function (elem., name, extra, styles) { 
Var val, num hooks. 
orlgeName = JQuery.camelCase(name), 
1SCustomProp = rcustomProp.test(name); 
1 (lisCustomProp) { 
name = finalPropName(orieName); 


} 
hooks = ]JQuery.cssHooks|name| || J]Query.cssHooks|orgName|: 
1f (hooks && "get" In hooks) { 

val = hooks.get(elem, true, extra): 


} 
if (val 一 Undefined) { 
val = curCSS(elem, name, styles): 


if (val —= "normal” && name in cssNormalTransform) { 


val = cssNormallranstorm[name|: 
} 
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lf (extra =——= "" || extra) { 
num = parseFloat(val): 
return extra 一 一 true || 1sFinite(num) > num || 0 : val: 


} 
return val: 
} 
1) 
jQuery 的 处 理 流程 如 下 : 


第 1 步 ， 分 解 参 数 。 

第 2 步 ， 转 换 为 驼峰 式 ， 修 正 属 性 名 。 

第 3 步 ， 如 果 有 钧 子 ， 则 调用 钩子 的 set、get 方法 。 
第 4 步 ， 最 终 实现 都 是 依靠 浏 览 希 本 身 的 API。 


83 案例 实战 


很 多 大 型 的 网 站 都 使 用 标签 ， 标 签 可 以 简单 地 理解 为 分 类 ， 但 是 它 和 分 类 所 用 的 表述 又 不 大 一 样 。 标 
签 是 一 种 更 加 随意 的 分 类 形式 ， 任 何 单词 、 任 何 有 意义 或 者 无 意义 的 语句 都 可 以 被 作为 一 个 标签 来 保存 。 

前 ， 比 较 流 行 的 一 种 标签 管理 方案 就 是 使 用 标签 云 ( Tag Cloud )。 顾 名 思 义 ， 标 签 云 就 是 让 标签 像 
云 打 一 样 显示 。 也 就 是 说 ， 根 据 标签 被 使 用 的 个 数组 织 标签 的 显示 ， 被 使 用 次 数 多 的 标签 显示 的 字体 较 大 
或 者 更 加 清晰 ， 被 使 用 次 数 较 少 的 标签 则 显示 得 较 小 或 者 更 加 模糊 ， 以 此 形成 一 种 错落 有 致 的 标签 云 效果 。 
本 例 演示 效果 如 图 8.11 所 示 。 


| +] 三 http:ylocalhostitestindexchtml 


标签 云 


css css3 html phtmlS : 


Java - 


C++ php“” js™ 
jquery node.js 


图 8.11 设计 标签 云 


【操作 水肥 】 
第 1 步 ， 设计 数据 表 ， 用 来 保生 标签 信息 。 本 例 使 用 PHP+MySQL 来 实现 后 台 技 术 文 持 。 使 用 phpMyAdmin 
新 建 数据 库 db_tags 和 数据 表 tb_tags。 数 据 表 结 构 如 下 : 


CREATE TABLE IF NOT EXISTS 'tb tags' ( 
1d nt(10) NOT NULL. 
tag' varchar(4$) NOT NULL， 
frequency Int(10) NOT NULL 
) ENGINE=MyISAM AUTO INCREMENT=16 DEFAULT CHARSET=utfi8: 
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从 提示: 读者 可 以 通过 本 节 示 例 源码 提供 的 数据 包 或 由 tags.sql 快速 安装 数据 库 ， 并 导入 试验 数据 。 
方法 1: 复 制 Data 目录 中 的 MySQL 数据 库 包 ， 然 后 复制 到 本 地 MYSQL 数据 库 安 装 路 径 下 。 
注意 ， 是 数据 存放 路 径 ， 如 C:\ProgramDataNMySQLAMYSQL Server 5.7\Data， 有 具体 路 径 根 据 个 人 
系统 和 安装 路 径 而 定 。 
方法 2: 使 用 phpMyAdmin 在 本 地 MySQL 中 新 建 数据 库 ， 数 据 库 名 称 为 db tags。 再 使 用 
phpMyAdmin 把 数据 表 db tags.sql 导入 db tags 数据 库 。 


浸 提示 : 设计 数据 表 的 方法 是 在 DhpMyAdmin 中 选择 数据 库 db tags， 在 顶部 导航 莱 单 中 选择 “导入 ” 
命令 ， 按 要 求 操作 即 可 。 


第 2 步 ， 新 建 后 台 处 理 文件 tagcloud.php， 从 数据 库 中 谈 取 所 有 的 标签 云 记 录 , 产生 JSON 格式 的 数据 
并 返回 客户 冰 。 
<?php 
// 数据 库 连 接 信息 ， 读 者 需要 根据 本 地 MySQL 的 配置 进行 重新 设置 
$host = "localhost": 1/ 服务 疾 
$user = "Toot": 1 用户 多 
$password = "11111111": / 用户 登录 MySQL 密码 
$database = "db tags": /连接 数据 库 的 名 称 
// 建立 连接 
$server = mysqll connect($host, $user, $password): 
$connection = mysqli select db($server, $database): 
/查询 数据 库 ， 获 取 所 有 记录 
$query = mysqli query($server, "SELECT * FROM tb tags"): 
/生成 json 对象 
$3]son = "({ tags:[": 
// 通过 循环 迭代 ， 对 返回 的 记录 集 进行 解析 
for ($x = 0: $x <mysqli num rows($query): $x ++) { 
$row = mysqli fetch assoc($query): 
// 连接 json 对 象 
$json .= "{tag:" . $row["tae"] . "",freq:" . $row["frequency"] . "+": 
/ 如 采 不 是 最 后 一 行 ， 则 添加 逗 号， 如 采 是 ， 则 关闭 括号 
if ($x < mysqli num rows($query) - 1) 
$json .= ".": 
else 


$json ="]})": 


} 

1/ 使 用 JSOP 回调 获取 JSON JSON 
$response =$ GET["callback"| . $json: 
echo $response: 

// 关闭 数据 库 连 接 

mysqli close($server): 

Ty 


第 3 步 ， 在 客户 端 页 面 接收 服务 器 返回 的 JSON 数据 。 首 先 设计 如 下 简单 结构 : 
<dlv 1d= "WwWTapper "> 
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<hl> 标签 云 </h1> 
<div 1d="content"> 
<dv 1d="tagCloud"=> </dIv= 
</div> 
</div> 


第 4 步 ， 使 用 jQuery 脚本 接收 数据 并 显示 出 来 。 


$(function(O { 
/获取 反馈 的 标签 
$.getJSON("tagcloud.php?callback=?", function(data) { 
/ 为 标签 链接 创建 列表 
$("<ul=>").attr("1d", "tagList").appendTo("#tagCloud"): 
// 创建 标签 去 
$.each(data.tags, function(i, val) { 
// 创建 标签 列表 项 目 
var li = $("<1i>"): | 
// 创建 链接 | 
$("<a>").text(val.tag).attr( {title:"See all pages tagpged with " + val.tag, href:"http://localhost/tags/" + val.tag 十 
".html"}).appendTo(li); | 
// 设置 标 签 的 大 小 
Var fontSize = val.freq /2 + "em": 
li.children().css("fontSize", tontSlze): 
// 添加 到 列表 中 
li.appendTo("#tagList"): 


3 
}); 
请 


84 在 线 红 


本 节 提供 多 个 CSS 操作 案例 ， 感 兴趣 的 读者 可 以 扫 码 阅读 。 


A 
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jQuery 动画 


( 视频 讲解 : 56 分 钟 ) 


JavaScript 语言 没有 提供 动画 功能 ， 需 要 借助 CSS 技术 来 实现 。 在 Web 设 计 中 ， 
动画 主要 包括 三 种 形式 : 位 置 变化 、 形 状 变化 和 显 隐 变 化 。 位 置 变化 主要 通过 CSS 定 
位 来 控制 ， 形 状 变化 王 要 通过 CSS 尺寸 来 控制 ， 显 隐 变 化 主要 通过 CSS 显示 来 控制 。 
jQuery 封装 了 CSS 动画， 提供 系 列 Web 效果 的 操作 方法 ， 帮 助 用 户 轻 松 创建 精致 、 复 


杂 的 动画 。 


【学 习 重 点 】 

by| 使 用 JQuery 简单 动画 方法 。 
| 设计 复杂 的 ]QUerY 动画 。 
P| 控制 动画 序列 。 

bp 设计 各 种 网 页 将 效 。 


第 日 章 JQUery 动画 / § A 


9.1 jQuery 动画 基础 


在 第 4 章 中 曾经 详细 介绍 过 css0 方法 的 使 用 ，jQuery 在 该 方法 基础 上 封装 了 系列 动画 控制 的 方法 ， 
方便 用 户 控制 页 面 对 象 。 


9.1.1 显 隐 效果 


最 简单 的 动画 效果 就 是 元 素 的 显示 和 隐藏 了 。 在 jQuery 中 ,使 用 show0 方法 可 以 显示 元 素 , 使 用 
hide0 方法 可 以 隐藏 元 素 。 如 条 把 showO 和 hide0 方法 配合 起 来 ， 就 可 以 设计 最 基本 的 显 隐 动 画 。 

show0 方法 用 法 如 下 : 

showf) 

show(duration, |callback|) 

show([duration|, [easing|, [callback|) 


名 ”duration: 一 个 字符 串 ， 或 者 数字 ， 决 定 动画 将 运行 多 入。 

回 callback: 在 动画 完成 时 执行 的 图 数 。 

加 easing: 用 来 表示 使 用 哪个 缓冲 呆 数 来 过 渡 的 字符 串 。 

hide0 方法 与 show0 方法 相同 ， 就 不 再 重复 介绍 。 

基本 的 hide0 和 show0 方法 不 带 任 何 参 数 。 可 以 把 它们 想象 成 类 似 css(display', 'string') 方法 的 简写 方 
式 。 这 两 个 方法 的 作用 就 是 立即 隐藏 或 显示 匹配 的 元 素 集 合 ， 不 币 任 何 动画 效果 。 

其 中 ，hide0 方法 会 将 匹配 的 元 素 集合 的 内 联 style 属性 设置 为 display:none， 也 能 够 在 把 display 的 值 
变 成 none 之 前 ， 记 住 原先 的 display 值 ， 通 常 是 block 或 inline。 相 反 ，show0 方法 会 将 匹配 的 元 素 集 合 的 
display 属性 恢复 为 应 用 display:none 之 前 的 可 见 属 性 。 

showQ 和 hide0 的 这 种 特性 ， 使 得 它们 非常 适合 隐藏 那些 默认 的 display 属性 在 样式 表 中 被 修改 的 元 素 。 
例如 ， 在 默认 情况 下 ,li 元 素 具有 display:block 属性 , 但是， 为 了 构建 水 平 的 导航 菜单 ， 它 们 可 能 会 被 修改 
成 display:inline。 而 在 类 似 这 样 的 1 元素 上 面 使 用 show0 方法 ， 不 会 简单 地 把 它 重 置 为 默认 的 display:block， 
因为 那样 会 把 二 元 素 放 到 单独 的 一 行 中 ; 相反 ，show0 方法 会 把 它 恢复 为 先前 的 display:inline 状态 ， 从 而 维 
持 水 平 的 菜单 设计 。 

【示例 1】 演 示 jQuery 的 showO 和 hide0 方法 的 应 用 。 

<ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<script src="]Jquery/Jquery-3.1.1.]s" type="text/Javascript"></script> 

<script type="text/Javascript" > 

$(functionO{ 

$("p").hide().hide(); 
$("div").hide().show'(); 
$("span").eq(0).hide(): 
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$("span")|lll.style.display = "none": 
$("span").show'(): 


<body> 

<p>P 元 素 </p> 

<div>DIV 元 素 </div> 

<span>SPAN 元 素 1</span> 

<span>SPAN 元 素 2</span> 

<span style="display:none:">SPAN 元 素 3</span> 
</body> 

</html> 


【示例 2】 使 用 for 循环 语句 动态 添加 6 个 div 元 素 ， 并 在 内 部 样式 表 中 定义 盒子 的 尺寸 、 背 景色 、 浮 动 
显示 ， 实 现 并 列 显示 。 然 后 为 所 有 div 元 素 绑 定 click 事件 ， 设 计 当 单 击 div 元 素 时 ， 调 用 hide0 方法 隐 
该 元 素 。 演 示 效 果 如 图 9.1 所 示 。 

<scrlpt type="text/Javascript" > 

$(function(){ 

for (var i= 0;1<5;1+t+) { 
$("<div>").appendTo(document.body); 


} 
$("div").click(function () { 
$(this).hide(N); 

用: 
月 
</script> 
<style> 
dv { backeround:red: width:100px: height: 100px:; margln:2pX: foat:left: } 
</style> 


<div></div> 


- 曰 hitpi/ orcalhost:8080/mysiterte: ~ 量 galocalhort x 御 ocahor x |ocalhcst 


图 9.1 hide0 方法 应 用 


除了 显示 和 隐藏 功能 外 ，show0 方法 和 hide0 方法 还 可 以 设置 参数 ， 以 优雅 的 动画 显示 所 有 匹 
素 ， 并 在 显示 完成 后 可 选 地 触发 一 个 回调 函数 。 

【示例 3】 调 用 show0 方法 和 hide0 方法 ， 并 设置 显 隐 过 程 为 1000 毫秒 ， 同 时 在 显 隐 动画 播放 全 
后 ,调用 第 二 个 参数 回调 函数 ， 弹 出 一 个 提示 对 话 框 ， 如 图 9 2 所 示 。 


<script type="text/Javascript" > 


3 
长 
( 
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$(functionO { 
var t= false: 
$("input").click( function(O) { 
tt 
$( "div" ).show(1000,function(){ 
alert(" 显示 DIV 元 素 "): 
FE 
$( "input" ).val(" 隐藏 元 叉 "): 
t= false: 
} 
else{ 
$( "div" ).hide(1000,function(){ 
alert(" 隐藏 DIV 元 素 "): 
外 
$C "input" ).val(" 显示 元 素 "): 
t = true:; 
1 
}) 
</script> 


<input type="button" value=" 隐藏 元 素 " 广 
<dv><lmgp sSTc= "1mapes/1.]pg" height="200" /></div> 


芝 


Oo- ewe "soe + 


图 9.2 设计 显 隐 动 画 效 果 


show0O 和 hide0 这 两 个 方法 的 第 一 个 参数 都 表示 动画 时 长 的 毫秒 数值 ， 也 可 以 设置 预定 义 的 字符 
捉 ( slow、normal 、fast )， 用 来 表示 动画 的 缓慢 、 正 和 常 和 快速 效果 。 使 用 show('slow') 会 在 0.6 秒 内 完成 效 
果 ，show(normal") 是 0.4 秒 ， 而 show(fast") 则 是 0.2 秒 。 要 指定 更 精确 的 速度 ， 可 以 使 用 毫秒 数值 。 例 如 ， 
show(850)。 注 意 ， 与 字符 串 表 示 的 速度 参数 名 称 不 同 ， 数 值 不 需要 使 用 引号 。 


浴 提示 : 当 在 show0 方法 或 hide() 方法 中 指定 一 个 速度 参数 时 ， 就 会 产生 动画 效果 ， 即 效果 会 在 一 个 特 
定 的 时 间 段 内 发 生 。 例 如 ，hide('speed') 方法 ， 会 同时 减少 元 素 的 高 度 、 宽 度 和 不 透明 度 ， 直 至 
这 三 个 属性 的 值 都 为 0， 与 此 同时 会 为 该 元 素 应 用 CSS 规则 display:none。 而 show('speed') 方法 
则 会 从 上 到 下 增 大 元 素 的 高 度 ， 从 左 到 右 增 大 元 素 的 宽度 ， 同 时 从 0 一 1 增加 元 素 的 不 透明 度 ， 
直至 其 内 容 完 全 可 见 。 
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| 【示例 4】 以 示例 2 为 基础 ， 在 hide0 方法 中 设置 隐藏 显示 的 速度 ， 并 定义 在 隐藏 该 div 元 素 之 后 ， 把 
| 当前 元 素 移出 文档 。 演 示 歼 果 如 图 9.4 所 示 。 
<scrIpt type="text/Javascript" > 
$(function(){ 
for (vari= 0;1<5;1H+) 1{ 
$("<div>").appendTo(document.body): 


| } 
$("div").click(function () { 
$(this).hide(2000, function () { 
$(this).remove(): 
PE 
月 : 
}) 
</script> 
<style> 
dv { backeround:red: width:100px: height: 100px: marein:2px; foat:lett: } 
</style> 


<div></div> 


< 2 -| 大 http:iiloralhost8080/mysite/i ~ Bejahost x 


图 9.3 设计 渐 隐 效果 


”9.1.2 显 隐 切换 


使 用 jQuery 的 toggle0 方法 能 够 切换 元 素 的 可 见 状态 。 如 果 元 素 是 可 见 的 ， 关 
。 如 果 元 素 是 隐藏 的 ， 则 把 它 切换 为 可 见 状态 。 用 法 如 下 : 

| togglel [duration|, [callback|) 

| toggle( [duration|, [easing|, [callback|) 

tozgele(showOrHide) 


参数 说 明 如 下 : 

加 ”duration: 一 个 字符 串 或 者 数字 ， 决 定 动画 
回 ”callback: 在 动画 完成 时 执行 的 函数 。 

加 easing: 用 来 表示 使 用 哪个 缓冲 函数 来 过 渡 的 字符 串 。 

加 ”showOrHide: 一 个 布尔 值 ， 指示 是 否 显示 或 隐藏 的 元 素 。 

如 果 没 有 参数 ，toggle( 方法 是 用 来 切换 元 素 可 见 性 的 最 简单 的 方法 


$('.target').toggle(): 
通过 改变 CSS 的 display 属性 ， 匹 配 的 元 素 将 被 立即 显示 或 隐藏 ， 没 有 动画 效果 。 如 果 元 素 处 于 显示 ; 


会 把 它 切 换 为 隐藏 状态 ; 


运行 多 久 。 
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CS 
态 ， 它 会 被 隐藏 ; 如 果 处 于 隐藏 状态 ， 它 会 被 显示 出 来 。display 属性 将 被 存储 并 且 在 需要 的 时 候 可 以 恢复 。 
如 果 一 个 元 素 的 display 值 为 nline， 然 后 是 隐藏 和 显示 ， 这 个 元 素 将 再 次 显示 inline。 
当 提供 一 个 持续 时 间 参 数 时 ，toggle0 会 成 为 一 个 动画 方法 。toggle( 方法 将 会 匹配 元 和 素 的 宽度 、 高 度 ， 
以 及 不 透明 度 ， 同 时 进行 动画 。 当 隐藏 动画 后 ， 高 度 值 为 0，display 样式 属性 被 设置 为 none， 以 确保 该 元 
素 不 再 影响 页 面 布 局 。 
持续 时 间 是 以 毫秒 为 单位 的 ， 数 值 越 大 ， 动 画 越 慢 。 字 符 串 'fast 和 Slow 分 别 代表 200 和 600 毫秒 的 延 时 。 
如 采 提 供 回调 函数 参数 ， 回 调 函 数 会 在 动画 完成 时 被 调用 ， 这 对 将 不 同 的 动画 串联 在 一 起 并 按 顺 序 排 
列 是 非常 有 用 的 。 这 个 回调 函数 不 设置 任何 参数 ， 但 是 this 是 存在 动画 的 DOM 元素， 如果 多 个 元 素 一 起 做 
动画 效果 ， 则 每 执行 一 次 回调 匹配 的 元 素 ， 而 不 是 作为 一 个 整体 的 动画 一 次 。 
【示例 】 使 用 toggle0 方法 设计 段落 文本 中 的 图 像 切换 显示 ， 同 时 添加 显示 速度 控制 ， 以 便 更 真实 地 显 
示 动 画 。 演 示 效 果 如 图 9.4 所 示 。 
<scrlpt type="text/Javascript" > 
$( function(){ 
$("button").click(function () { 
$0"p").togele("slow"); 
1 


}); 
</script> 


<p><1meg src="1mages/l.jpe" height="300" /></Pp> 
<button> 显示 和 隐藏 </button> 


甘 
ea +) hpyriocalho.. ac|Scorr < 国 已 是 ， 


图 9.4 使 用 toggle0 方法 


六 提示 : toggleg0 方法 还 可 以 接收 多 个 参数 。 如 果 传 入 true 或 者 false 参数 值 ， 则 可 以 设置 元 素 显 示 或 者 
隐藏 ， 功 能 类 似 于 show0 方法 和 hide0 方法 。 如 果 参 数值 为 ttue， 则 功能 类 似 于 调用 show0 方 
法 来 显示 匹配 的 元 素 ; 如 果 参 数值 为 false， 则 调用 hide() 方法 来 隐藏 元 素 。 
如 果 传 入 一 个 数值 或 者 一 个 预定 义 的 字符 串 ， 如 "slow"、'"normal" 或 者 "fast"， 则 表示 在 显 
隐 切 换 时 ， 以 指定 的 速度 动态 显示 匹配 的 显 隐 过 程 。 
除了 指定 动画 显 隐 的 速度 外 ， 还 可 以 在 第 二 个 参数 处 指定 一 个 回调 函数 ， 以 便 在 动画 演示 
完毕 之 后 调用 该 函数 ， 完 成 额外 的 任务 。 
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起 


9.1.3 ” 靖 动 效果 


滑动 效果 包括 两 种 : 匀速 运动 和 变速 运动 。 匀 速 运 动 只 需要 使 用 JavaScript 动态 控制 元 素 的 显示 位 置 即 


可 ; 而 变速 运动 需要 用 到 一 些 简 单 的 算法 ， 也 称 为 缓 动 动画 。 


未 。 


jQuery 提供 了 简单 的 滑动 方法 : slideDown0 和 slideUpO， 这 两 个 方法 可 以 设计 向 下 滑动 和 向 上 滑动 效 
这 两 个 方法 的 具体 用 法 如 下 : 

slideDown([duration|, [callback|) 

sdeDown([duration|, [easing|, [callback|) 

slideUp(|duration|, [callback|) 

sldeUp([duration|, [easing|, [callback|) 


参数 说 明 如 下 : 

加 ”duration: 一 个 字符 串 或 者 数字 ， 用 来 定义 动画 将 运行 多 入。 

加 easing: 用 来 表示 使 用 哪个 组 动力 数 来 过 渡 的 字符 串 。 

加 ”callback: 在 动画 完成 时 执行 的 函数 。 

slideDown0 方法 和 slideUp0 方法 将 给 匹配 元 素 的 高 度 的 动画 。 其 中 slideDown0 方法 能 够 导致 页 面 的 


下 面部 分 滑 下 去 ， 弥 补 了 显示 的 方式 。 而 slideUp0 方法 导致 页 面 的 下 面部 分 滑 上 去 ， 弥 补 了 显示 的 方式 。 
一 旦 高 度 为 0，display 样式 属性 将 被 设置 为 none， 以 确保 该 元 素 不 再 影响 页 面 布局 。 


持续 时 间 是 以 毫秒 为 单位 的 ， 数 值 越 大 ， 动 画 越 慢 。 字 符 串 fast 和 'slow' 分 别 代表 200 和 600 毫秒 的 


延 时 。 如 果 提 供 任 何其 他 字符 串 ， 或 者 这 个 duration 参数 被 省 略 ， 那 么 默认 使 用 400 毫秒 的 延 时 。 


如 有 果 提 供 回 调 函 数 参 数 ， 回 调 函 数 会 在 动画 完成 时 被 调用 ， 这 对 将 不 同 的 动画 串联 在 一 起 并 按 顺 序 排 


列 是 非常 有 用 的 。 这 个 回调 函数 不 设置 任何 参数 ， 但 是 this 是 存在 动画 的 DOM 元素 ， 如 来 多 个 元 系 一 起 做 
动画 效果 ， 则 每 执行 一 次 回调 匹配 的 元 素 ， 而 不 是 作为 一 个 整体 的 动画 一 次 。 


【示例 】 有 3 个 按钮 和 3 个 文本 框 ， 当 单 击 按钮 时 将 自动 隐藏 按钮 后 面 的 文本 框 ， 且 以 滑动 方式 逐渐 隐 
隐藏 之 后 会 在 底部 <div id="msg"> 信息 框 中 显示 提示 信息 。 演 示 效 果 如 图 9.5 所 示 。 


<script type="text/Javascript" > 
$( function() + 
$("button").click(function O { 
$(this).parent(O.slideUp("slow", function | { 
$("#msg").text($("button", this).textO + " 已 经 实现 。"): 
»); 
}); 
}); 
</script> 
<style type="text/css"> 
div { marein:2px; } 
</style> 


<div> 
<button> 隐藏 文本 框 1</button> 
<input type="text" value=" 文本 框 1" 放 
</div> 
<div> 
<button> 隐藏 文本 框 2</button> 
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<input type 一 "text" value=" 文本 框 2" /> 
</div> 
<div> 
<button> 隐藏 文本 框 3</button> 
<input type="text" value=" 文本 框 3" 广 
</dv> 
<dlv 1d="mse"></div=> 


| YO- tp/ocalto.. - Eo 
让 茂 文 本 框 2 


隐 闻 六 本 框 1 已 经 实现 。 


图 9.5 显 隐 滑动 应 用 


< 人 注意 : slideDown0 方法 仅 适用 于 被 隐藏 的 元 素 ， 如 果 为 已 显示 的 元 素 调用 slideDown0 方法 ， 是 看 不 
到 效果 的 。 而 slideUp0 方法 正好 相反 ， 它 可 以 把 显示 的 元 素 缓慢 地 隐藏 起 来 。slideDownO 方 | 
法 和 slideUp0 方法 正 像 卷 帘 ，slideDown0 方法 能 够 缓慢 地 展开 帘子 ， 而 slideUp0 方法 能 够 缓 | 
慢 地 收缩 帘子 。 通 俗 描述 ,slideDown0 方法 作用 于 隐藏 元 素 ， 而 slideUp0 方法 作用 于 显示 元 素 ， 
两 者 功能 和 效果 截然 相反 。 
slideDown0 方法 和 slideUp0 方法 可 以 包含 两 个 可 选 的 参数 : 第 一 个 参数 设置 滑动 的 速度 ， 
可 以 设置 预定 义 字 符 事 ， 如 "slow"、"normal" 和 "fast ， 或 者 传递 一 个 数值 ， 表 示 动 画 时 长 的 毫 
秒 数 ; 第 二 个 可 选 参 数 表示 一 个 回调 函数 ， 当 动画 完成 之 后 ， 将 调用 该 回调 函数 。 


9.1.4 请 动 切换 


与 toggle0 方法 的 功能 相似 ，jQuery 为 滑动 效果 也 设计 本 一 个 切换 方法 一 一 slideToggle()。slideToggle() 
方法 的 用 法 与 slideDown0 方法 和 slideUp0 方法 的 用 法 相同 ,但 是 它 综 合 了 slideDown0 方法 和 slideUp0 方 
法 的 动画 效果 ， 可 以 在 滑动 中 切换 显示 或 隐藏 元 素 。 用 法 如 下 : 

sdeTogele([duration|, |callbacK|) 

slideToggle([duration|, [easing|, |caljbacKk|) 


参数 说 明 如 下 : 

回 duration: 一 个 字符 串 或 者 数字 ， 决 定 动 画 将 运行 多 入。 

四 easing: 一 个 用 来 表示 使 用 哪个 绥 动 图 数 来 过 渡 的 字符 串 。 

加 ”callback: 在 动画 完成 时 执行 的 图 数 。 | 

slideToggle0 动画 将 改变 元 素 的 高 度 ， 这 会 导致 页 面 的 下 面部 分 滑 下 去 或 滑 上 来 ,显示 或 隐藏 项 目 。 | 
display 属性 将 被 存储 并 且 需 要 的 时 候 可 以 恢复 。 如 果 一 个 元 素 的 display 值 为 inline， 然 后 是 隐 源 和 显示 ， | 
这 个 元 素 将 再 次 显示 ipline。 当 一 个 隐藏 动画 后 ， 高 度 值 达 到 0 的 时 候 ，display 样式 属性 被 设置 为 none， 
以 确保 该 元 素 不 再 影响 页 面 布局 。 | 

持续 时 间 是 以 毫秒 为 单位 的 ， 数 值 越 大 ， 动 画 越 慢 。 字 符 串 'fast 和 'slow 分别 代表 200 和 600 毫秒 的 延 时 。 ， 


人 


zy 俯 入 门 到 精通 ( 币 课 精 编 县 


如 有 果 提 供 回 调 函 数 参 数 ， 回 调 消 数 会 在 动画 完成 时 被 调用 。 这 对 将 不 同 的 动画 串联 在 一 起 并 按 顺 序 排 
列 是 非常 有 用 的 。 这 个 回调 函数 不 设置 任何 参数 ， 但 是 this 是 存在 动画 的 DOM 元 素 ， 如 打 多 个 元 系 一 起 做 
动画 效 朱 ， 则 每 执行 一 次 回调 匹配 的 元 素 ， 而 不 是 作为 一 个 整体 的 动画 一 次 。 

【示例 】 页 面 中 包含 一 个 按钮 ， 当 单 击 按钮 时 将 目 动 隐藏 部 分 div 元 系 ， 同 时 显示 被 隐藏 的 div 元 素 ， 
演示 效果 如 图 9.6 所 示 。 

<script type="text/Javascript" > 

$( fnction(){ 

$("#aa").click(function OO { 
$("div:not(.still)").slideToggle("slow", function () { 
var n = parselInt($("span").text(), 10); 
$("span").text(n + 1); 


| 3 
| )); 

| }); 
</script> 

<style type="text/css"> 

| dv { backeround:#b977d1: margln:3pX: Width:60px: height:60px: float:left: } 
div.still { backeround:#345:; width:Spx: } 

| div.hider { display:none: } 

span { color:red; } 

p {clear: left: } 

| </style> 


| <div></div> 

<dv class="still"></div> 

<dlv style="display:none;"> </div> 

<dv class="still"></div> 

<div></dIv> 

| <div class="still"></div> 

| <div class="hider"></div> 

| <dv class="still"></div> 

<dv class="hider"></dIv> 

<dv class="still"></div> 

' <dv></div> 

| <p> 

| <button id="aa"> 滑动 切换 </button> 
共计 滑动 切换 <span>0</span> 个 div 元 率 。 

</p> 


并 


1 
| 2 由- 吉 htpy/localho.- ~ 国 忆 | 党 |ocalhost 其 


消 动 DE | 共计 绢 动 切 挽 18 个 dv 元素。 


/ 图 9.6 ” 显 隐 切 换 滑动 应 用 
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9.1.5 淡 入 淡出 


淡 入 和 淡出 效果 是 通过 不 透明 度 的 变化 来 实现 的 。 与 滑动 效果 相 比 ， 淡 入 淡出 效果 只 调整 元 素 的 不 透明 
， 而 元 素 的 高 度 和 宽度 不 会 发 生变 化 。jQuery 定义 了 3 个 淡 入 淡出 方法 : fadeIn0、fadeOut0 和 fadeTo0。 

fadeIn0 方法 和 fadeOut0 方法 的 用 法 如 下 : 

fadeIn([duration|, [callback]|) 

fadeIn([duration|, [easing|, [callback]|) 

fadeOut([duration|], [callback]|) 

fadeOut([duration|, [easing|, [callback]|) 


回 duration: 一 个 字符 串 或 者 数字 ， 该 参数 决定 动画 将 运行 多 久 。 

加 easing: 一 个 用 来 表示 使 用 哪个 缓 动 图 数 来 过 渡 的 字符 串 。 

名 ”callback: 一 个 在 动画 完成 时 执行 的 消 数 。 

fadeOut0 方法 通过 匹配 元 素 的 透明 度 做 动画 效果 。 一 旦 透明 度 为 0，display 样式 属性 将 被 设置 为 none， 
以 确保 该 元 素 不 再 影响 页 面 布 局 。 

fadeOut0 方法 和 fadeIn0 方法 的 延 退 时 间 是 以 毫秒 为 单位 的 ， 数 值 越 大 ， 动 画 越 慢 。 字 符 串 'fast 
和 'slow' 分 别 代表 200 和 600 毫秒 的 延 时 。 如 果 提 供 任 何其 他 字符 串 ， 或 者 这 个 duration 参数 被 省 略 ， 那 么 
默认 使 用 400 上 毫秒 的 延 时 。 

如 果 提 供 回 调 孙 数 参 数 ， 回 调 清 数 会 在 动画 完成 时 被 调用 。 这 对 将 不 同 的 动画 串联 在 一 起 并 按 顺序 排 
列 是 非常 有 用 的 。 这 个 回调 哺 数 不 设置 任何 参数 ,但 是 this 是 存在 动画 的 DOM 元 素 ， 如 果 多 个 元 素 一 起 做 
动画 效果 ， 则 这 个 回调 函数 在 每 个 匹配 元 素 上 执行 一 次 ， 而 不 是 这 个 动画 作为 一 个 整体 。 

【 示例】 为 段落 文本 中 的 span 元 素 绑 定 hover 事件 ， 设 计 鼠 标 移 过 时 动态 背景 效果 ， 同 时 绑 定 click 事 
件 ， 当 单 击 span 元 素 时 ， 将 渐 隐 该 元 素 ， 并 把 该 元 素 包 含 的 文本 传递 给 div 元 素 ， 实 现 隐藏 提示 信息 效果 ， 
演示 效果 如 图 9.7 所 示 。 

<script type="text/Javascript" > 

$( functionO{ 

$("span").click(function () { 
$(this) fadeOut(1000, function () { 
$("div").text(" “" + $(this).textO + "” 已 经 隐藏 。"): 
$(this).removel():; 
及: 


源 


3); 
$("span").hover( 
function ( { 
$(this).addClass("hilite"): 
有 
function ( { 
$(this).removeClass("hilite"); 
1): 
1): 
</script> 
<style type="text/css"> 


span { cursor:pointer: } 
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zy 以 入 门 到 精通 ( 竹 课 精 信用 ) 


span.hilite { backeround:yellow: } 
div { display:nline; colorred: } 
</style> 


<h3> 隐藏 提示 : <div></div></h3> 

<p> 雨 ，<span> 轻薄 浅 落 </span>，<span> 丝 丝 缕缕 </span>，<span> 幽幽 她 她 </span>。 不 知 何 时 起 ， 细 腻 的 心 
艳 名 地 爱 上 了 阴雨 天 。 也 许 ， 雨 天 是 思念 的 <span> 风铃 </span>， 雨 球 下 ， 答 便 啊 。 伸 出 薄 产 的 手掌 ， 两 轻 
弹 地 滴 落 在 掌心 ，<span> 凉意 </span>， 遍 布 全 身 ; <span> 怀念 </span>， 张 开 翅 膀 ; <span> 眼角 </span>， 已 
感 湿润 。</p> 


党 一 一 上 本 -| 三 htip:iocalhost:3080/rr = 总 必 兽 充 还 
隐藏 提示 :“ 曲 和 则 建 恕 " 己 径 隐藏 . 


而 轻生 洁 莹 ， 丝 乡 久 千 ，, 工 知人 条 时 怒 ， 组 悦 的 英名 地 圳 上 了 男 而 天。 也 许 ， 而 
念 的 风 符 ， 符 便 响 ， 作 出 清凉 的 手 营 ， 十 轻 强 地 滴 沙 在 常 心 ， 凉 音 ， 


响 。 
人 怀 合 ， 环 开 好 及 眼角 ， EE 洒洒 ， 


图 9.7 淡 入 和 淡出 应 用 


通过 上 面 示例 可 以 看 到 ，fadeIn0 方法 和 fadeOut( 方法 与 slideDown0 方法 和 slideUp0 方法 的 用 法 是 完 


全 相同 的 ， 它 们 都 可 以 包含 两 个 可 选 参 数 ， 第 一 个 参数 表示 动画 持续 的 时 间 ， 以 瞩 秒 为 单位 ， 男 外 还 可 以 
使 用 预定 义 字 符 串 "slow"、"normal" 和 "fast"， 使 用 这 些 特殊 的 字符 串 可 以 设置 动画 以 慢 速 、 正 常 速度 和 快 
速 进行 演示 。 


第 二 个 参数 表示 回调 函数 ， 该 参数 为 可 选 参 数 ， 用 来 在 动画 演示 完毕 之 后 被 调用 ,例如 ， 在 上 面 示例 中 ， 


当 单 击 按钮 之 后 调用 div 元 素 的 fadeIn0 方法 ， 逐 步 显 示 隐 藏 的 元 素 ， 当 显示 完成 之 后 再 次 调用 回调 图 数 。 
< 秀 注意 : 与 slideDown0 方法 和 slideUp0 方法 的 用 法 相同 ，fadeIn0 方法 只 能 够 作用 于 被 隐藏 的 元 素 ， 而 


fadeOut0 方法 只 能 够 作用 于 显示 的 元 素 。 
fadeIn() 方法 能 够 实现 所 有 匹配 元 素 的 淡 入 效果 ， 并 在 动画 完成 后 可 选 地 触发 一 个 回调 函 
数 。 而 fadeOut() 方法 正好 相反 ， 它 能 够 实现 所 有 匹配 元 素 的 淡出 效果 。 


9.1.6 控制 淡 入 淡出 度 


fadeTo0 方法 能 够 把 所 有 匹配 元 素 的 不 透明 度 以 渐进 方式 调整 到 指定 的 不 透明 度 ， 并 在 动画 完成 后 可 选 


地 触发 一 个 回调 函数 。 用 法 如 下 : 


fadeTo(duration, opacity, [callback|) 
fadeTo([duration|, opacity, [easing|, [callback|) 


参数 说 明 如 下 : 

duration: 一 个 字符 串 或 者 数字 ， 决 定 动画 将 运行 多 久 。 

回 opacity: 一 个 0 一 1 的 数字 ， 表 示 目 标 透 明度 。 

回 easing: 一 个 用 来 表示 使 用 哪个 缓冲 旺 数 来 过 渡 的 字符 串 。 

加 ”callback: 在 动画 完成 时 执行 的 函数 。 

该 方法 的 延 开 时 间 是 以 训 秒 为 单位 的 ， 数值 越 大 ， 动画 越 慢 。 字 符 串 "fast" 和 "slow" 分 别 代 表 200 和 


四 
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600 蝇 秒 的 延 时 。 如 果 提 供 任何 其 他 字符 串 ， 或 者 这 个 duration 参数 被 省 略 ， 那 么 默认 使 用 400 坚 秒 的 延 时 。 
和 其 他 效果 方法 不 同 ，fadeTo0 需要 明确 地 指定 duration 参数 。 
如 采 提 供 回 调 函 数 参 数 ， 回 调 函 数 会 在 动画 完成 时 被 调用 。 这 对 将 不 同 的 动画 串联 在 一 起 并 按 顺 序 排 
列 是 非常 有 用 的 。 这 个 回调 函数 不 设置 任何 参数 ,但 是 this 是 存在 动画 的 DOM 元 素 ， 如 果 多 个 元 素 一 起 做 
动画 效果 ， 则 这 个 回调 函数 在 每 个 匹配 元 素 上 执行 一 次 ， 而 不 是 这 个 动画 作为 一 个 整体 。 
【示例 】 把 图 像 逐 步调 整 到 不 透明 度 为 0.4 的 显示 效果 ,演示 效果 如 图 9.8 所 示 。 
<scrlpt type="text/Javascript" > 
$(function(){ 
$("input").click(function(O{ 
$("div").fadelo(2000.,0.4); 
}) 


2 
</script> 


<input type="button'" value=" 控制 痰 人 淡出 度 " 广 
<dvV>=Img STc="1Dmages/1.]Dg" helght "200"” /></dIv> 


并 


| [二 各 httpy/localho ~ 到 蕊 翁 localhost 


9.8 设置 淡出 透明 效果 


< 包 注意 : fadeTo0 方法 仅 能 够 作用 于 显示 的 元 素 ， 对 于 被 隐藏 的 元 素来 说 是 无 效 的 。 


9.1.7 ”渐变 切换 


与 toggle0 方法 的 功能 相似 ，jQuery 为 淡 入 淡出 效果 也 设计 了 一 个 渐变 切换 的 方法 一 一 fadeToggle()。 
fadeToggleO 〇 方法 的 用 法 与 fadeInO0 方法 和 fadeOutO 方法 的 用 法 相同 ,但 是 它 综 合 了 了 fadeIn0 方法 和 
fadeOut0 方法 的 动画 效果 ， 可 以 在 渐变 中 切换 显示 或 隐 着 元 素 。 用 法 如 下 : 


fadeToggle ([duration|, [callback|) 
fadeToggle ([duration|, [easing|, [callback|) 


参数 说 明 如 下 : 

加 duration: 一 个 字符 串 或 者 数字 ， 决 定 动画 将 运行 多 入 。 
回 easing: 一 个 用 来 表示 使 用 哪个 缓冲 函数 来 过 渡 的 字符 串 。 
加 callback: 在 动画 完成 时 执行 的 晴 数 。 


.261 。 
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持续 时 间 是 以 蝇 秒 为 单位 的 ， 数 值 越 大 ， 动 画 越 慢 。 字 符 串 fast 和 Slow' 分 别 代表 200 和 600 毫秒 的 
| 延 时 。 
如 果 提 供 回调 函数 参数 ， 回 调 函 数 会 在 动画 完成 时 被 调用 。 这 对 将 不 同 的 动画 串联 在 一 起 并 按 顺 序 排 
列 是 非常 有 用 的 。 这 个 回调 函数 不 设置 任何 参数 ， 但 是 this 是 存在 动画 的 DOM 元 素 ， 如 果 多 个 元 素 一 起 做 
动画 效果 ， 则 每 执行 一 次 回调 匹配 的 元 素 ， 而 不 是 作为 一 个 整体 的 动画 一 次 。 
【示例 】 在 页 面 中 显示 两 个 按钮 ， 当 单 击 这 两 个 按钮 时 ， 会 切换 渐变 显示 或 者 隐藏 下 面 的 图 像 ， 第 二 个 
” 按钮 的 click 事件 处 理 函 数 中 调用 fadeToggle0 方法 时 ,传递 一 个 回调 函数 ， 在 这 个 函数 中 将 每 次 单 击 按钮 
”2 的 信息 追加 到 div 元 素 中 ， 演 示 效 果 如 图 9.9 所 示 。 
| <script type="text/Javascript" > 
$(function() { 
$("button:first").click(function() { 
$("imeg:first").fadeToggle("slow", "linear"): 
a OH 
$("imeg:last").fadeTogegle("fast", function () { 
$("#log").append("<div> 单 击 按 钮 2</div>"); 


}); 
)): 
}) 
</script> 


<button> 控制 按钮 1</button> 

<button> 控制 按钮 2</button> 

<p><1meg src—"images/].pe" height="200" /><meg src="1mages/1 .pe2" height—="200" </p> 
<dv 1d="log"></dIv> 


并 


| hpocahostasom -Solocahost >x 国 本 汪 证- 
控制 按钮 仆 | 控制 按钮 2 


| 图 9.9 ”渐变 切换 效果 


92 设计 动画 


| animate( 是 jQuery 效果 的 核心 方法 ，9.1 节 方 法 都 建立 在 该 方法 基础 上 。 使 用 animate0 方法 可 以 创建 
包含 多 重 效果 的 自 定 义 动画 ， 用 法 如 下 : 


* 202 。 


人 NS 


animate(properties, [duration|, [easing|, [callback|) 
animate(properties, options) 


参数 说 明 如 下 ， 

properties: 一 组 CSS 属性 ， 动 画 将 朝 着 这 组 属性 移动 。 | 

duration: 一 个 字符 串 或 者 数字 ， 决 定 动画 将 运行 多 久 。 

easing: 定义 要 使 用 的 擦 除 效 果 的 名 称 ， 但 是 需要 插件 支持 ， 默 认 jQuery 提供 linear 和 swing。 | 

callback: 在 动画 完成 时 执行 的 因数 。 

options: 一 组 包含 动画 选项 的 值 的 集合 。 文 持 的 选项 : 

> duration: 二 种 预定 速度 之 的 字符 串 ， 如 "slow" "normal" 或 者 "fast"， 或 者 表示 动画 时 长 的 毫 | 
秒 数值 ， 如 1000。 默 认 值 为 "normal"。 | 

> ”easing: 要 使 用 的 擦 除 效 果 的 名 称 ， 需 要 插件 支持 ， 默 认 jQuery 提供 linear 和 swing。 默 认 值 

为 swing。 

complete: 在 动画 完成 时 执行 的 困 数 。 

step : 每 步 动画 执行 后 调用 的 清 数 。 

queue: 设 定 为 flse， 将 使 此 动画 不 进入 动画 队列 ， 默 认 值 为 true。 

specialEasing: 一 组 一 个 或 多 个 通过 相应 的 参数 和 相对 简单 函数 定义 的 CSS 属性 。 


时 的 多 鸭 的 


VY YY Y 


9.2.1 模拟 show() 


show0 方法 能 够 显示 隐藏 的 元 素 ， 也 会 同时 修改 元 素 的 宽度 、 高 度 和 不 透明 度 属 性 。 因 此 ,事实 上 | 
show0 方法 只 是 animate0 方法 的 一 种 内 置 了 特定 样式 属性 的 简写 形式 。 通 过 animate0 方法 设计 同样 的 效果 
就 非常 简单 。 / 
【示例 1】 使 用 hide0 方法 隐藏 图 像 ， 然 后 当 单 击 按钮 时 ， 将 会 触发 click 事件 ， 然 后 缓慢 显示 图 像 。 
<script type="text/Javascript" > 
$(function(){ 
$("1me").hide(): 
$("button").click(function ( { 
$("1me").show('slow’): 
}); 
1) 
</script> 


<button> 控制 按钮 </button> 
<p><lmg STc= "Imapges/1.]pg" height="300" /></Pp> 


【示例 2】 针 对 示例 1， 可 以 使 用 animate0 方法 进行 模拟 ， 具 体 代 码 如 下 : 


<script type="text/Javascript" > 
$(function() { 
$("ime").hide(): 
$("button").click(function ( { 
$("Img").animate({ 
heieht:'show., 
width:'show.. 
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opaclty:'show 
},'show'"): 
})); 
}) 
</script> 


<button> 控制 按钮 1</button> 
<p><1meg src—"Images/be$.jpe" height="300" /></p> 


演示 效果 如 图 9.10 所 示 。 


图 9.10 演示 效果 


animate0 方法 拥有 一 些 简写 的 参数 值 ， 这 里 使 用 简写 的 show 
的 值 。 当 然 ， 也 可 以 使 用 hide、toggle 或 其 他 任意 数字 。 


高 度 、 宽 度 等 恢复 到 了 它们 被 隐藏 之 前 


9.2.2 目 定 义 动 男 


animate0 方法 可 以 用 于 创建 自 定义 动画 。 该 方法 的 关键 就 在 于 指定 动画 的 形式 ， 以 及 动画 结果 样式 属 
性 的 对 象 
【示例 1】 设 计 当 单 击 按钮 时 ， 图 像 的 大 小 被 放大 到 原始 大 小 ， 实 现代 码 如 下 ; 


<SCIIpt type="text/Javascript" > 


$(function(){ 
$("button").click(function() { 
$("ime").animate( { 
width: "100%", 
helght: "100%" 
}, 1000 ): 
月 
}) 
</script> 
<button> 控制 按钮 </button> 


<p><imeg src="images/1.jpe" height="300" /></p> 
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animate0 方法 包含 4 个 参数 : 第 一 个 参数 是 一 组 包含 作为 动画 属性 和 终 值 的 样式 属性 和 及 其 值 的 集合 。 
形式 类 似 如 下 代码 : 


{ | 
width: "90%%", | 
height "100%", 
fontSize: "10em", | 
borderWidth: 10 | 

; / 


这 个 集合 对 象 中 每 个 属性 都 表示 一 个 可 以 变化 的 样式 属性 ， 如 height、top、opacity 等 。 注 意 ， 所 有 指 
定 的 属性 必须 采用 驼峰 式 命 名 法 ， 如 marginLeft， 而 不 是 margin-left。 这 些 属性 的 值 表示 这 个 样式 属性 到 多 / 
少时 动画 结束 。 | 
如 果 属 性 值 是 一 个 数值 ， 样 式 属性 就 会 从 当前 的 值 渐变 到 指定 的 值 。 如 果 使 用 的 是 "hide" "show" 或 
"toggle" 等 特定 字符 串 值 ， 则 会 为 该 属性 调用 默认 的 动画 形式 。 
【示例 2】 在 一 个 动画 中 同时 应 用 4 种 类 型 的 效果 ， 放 大 文本 大 小 ， 扩 大 元 素 宽 和 高 ， tg Nt 
可 以 在 高 度 和 不 透明 度 之 间 来 回 切换 显示 p 元 素 。 当 然 ， 读 者 可 以 添加 更 多 的 动画 样式 ， 以 设计 复杂 的 动 
态 效果 。 
$(function(){ 
$("button").click(function(O) { 
$("p").animate({ 
width: "200%", 
height: "200%%", 
fontSize: "Sem", 
helght 'togele,, 
opacity: 'togele' 
}. 1000 ): 
月 
月 
第 二 个 参数 表示 动画 持续 的 时 间 ， 以 毫秒 为 单位 ， 也 可 以 设置 预定 义 字符 串 ， 如 "slow" "normal" 和 
"fast"。 在 jQuery 1.3 中 ， 如 果 第 二 个 参数 设置 为 0， 则 表示 直接 完成 动画 ， 而 在 以 前 版 本 中 则 会 执行 默认 | 
动画 。 
第 三 个 参数 表示 要 使 用 的 擦 除 效果 的 名 称 ， 这 是 一 个 可 选 参数 ， 要 使 用 该 参数 ， 则 需要 插件 支持 。 默 
认 jQuery 提供 "linear" 和 "swing" 特效 。 | 
第 四 个 参数 为 回调 困 数 ， 表 示 在 动画 演示 完毕 之 后 ， 将 要 调用 的 图 数 。 
【示例 3】 使 div 元 率 回 左右 平滑 移动 。 


<Scrlpt type="text/Jjavascript" > 
$(function(O){ 
$("input").eq(0).click(functionO { 
$("div").animate( { 
left: "-100px" 
}, 1000) 
1) 
$("input").eq(1).click(function(O { 
$("div").animate( { 


“265。 


Js 入 和 门 到 精通 ( 币 课 精 编 县 ) 


left: "+200px" 


}, 1000) 
}) 
!) 
</script> 


<input type="button" value=" 回 左 运动 " 广 <input type="button" value=" 回 右 运动 " 广 
<div style="position:absolute:left:200px: border:solid 1px red:"> 上 月 定义 动画 </div> 


< 所 注意 : 要 想 使 div 元 素 能 够 自由 移动 ， 必 须 设置 它 的 定位 方式 为 绝对 定位 、 相 对 定位 或 者 固定 定位 ， 
如 果 是 静态 定位 ， 则 移动 动画 是 无 效 的 。 
同时 ， 移 动 的 动画 总 是 在 默认 位 置 以 参照 物 为 基础 的 。 例 如 ， 在 上 面 示例 中 ， 已 经 定义 
div 元 素 left:200px， 如 果 在 animate0 方法 中 设置 left: "+100px"， 则 div 元素 并 不 是 向 右 移动 ， 
而 是 向 左 移动 100 像素 。 对 于 left: "-100px" 移动 动画 来 说 ， 则 会 在 现在 固定 位 置 基 础 上 向 左 移 
动 300 像素 。 


animate() 方法 的 功能 是 很 强大 的 ， 可 以 把 第 二 个 及 其 后 面 的 所 有 参数 都 放置 在 一 个 对 象 中 ， 在 这 个 集 
合 对 象 中 包含 动画 选项 的 值 ， 然 后 把 这 个 对 象 作 为 第 二 个 参数 传递 给 animate0 方法 。 该 参数 可 以 包含 下 面 
多 个 选项 : 

回 duration: 指定 动画 演示 的 持续 时 间 ， 该 选项 与 在 animate0 方法 中 直接 传递 的 时 间作 用 是 相同 的 。 
duration 选项 也 可 以 包含 3 个 预定 义 的 字符 串 ， 如 "slow" "normal" 和 "fast"。 
easing: 该 选项 接收 要 使 用 的 擦 除 效果 的 名 称 ， 需 要 插件 支持 ， 默 认 值 为 "swing"。 
complete: 指定 动画 完成 时 执行 的 图 数 。 
step : 动画 演示 之 后 回调 值 。 
queue: 该 选项 表示 是 否 将 使 此 动画 不 进入 动画 队列 ， 上 默认 值 为 true。 

【示例 4】 设置 一 个 动画 队列 ， 其 中 设置 第 一 个 动画 不 在 队列 中 运行 ， 此 时 可 以 看 到 第 一 个 动画 的 字体 
变 大 和 第 二 个 动画 的 元 素 高 度 增加 是 同步 进行 的 。 当 这 两 个 动画 同步 完成 之 后 才 触 发 第 三 个 动画 。 在 第 三 
个 动画 中 ,设置 div 元 素 的 最 终 不 透明 度 为 0， 则 经 过 2000 毫秒 的 淡出 演示 过 程 之 后 ,该 div 元 素 消 失 。 

<scrlpt type="text/Javascript" > 

$(fnction(){ 

$("nput").click(function( )1{ 
$odiv animate( 第 一 个 动画 


四 轴 负 向 


{height:"120%"}, 
{duration: $000, queue: false} 
)-animate(\ /第 二 个 动画 ， 将 与 第 一 个 动画 并 列 进行 


tontSlze: "10em" 
}.1000).animate({ ”第 三 个 动画 


opacity: 0 
}, 2000): 
}) 
1) 
</script> 


<input type="button" value=" 上 月 定义 动画 " 广 
<div style='"border:solid 1px red:"> 自 定义 动画 </div> 
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9.2.3 滑动 定位 


使 用 animate0 方法 还 可 以 控制 其 他 属性 ， 这 样 能 够 创建 更 加 精致 
的 高 度 增加 到 50 像素 的 同时 ， 将 它 从 页 面 的 左 侧 移动 到 页 面 右 侧 。 

在 使 用 animate0 方法 时 ， 必 须 明确 CSS 对 要 改变 的 元 素 所 施加 的 限制 。 例 如 ， 在 元 素 的 CSS 定位 没有 
设置 成 relative 或 absolute 的 情况 下 ,调整 lef 属性 对 于 匹配 的 元 素 毫 无 作用 。 所 有 块 级 元 素 默 认 的 CSS 定 
位 属性 者 是 static， 这 个 值 精确 地 表明 : 在 改变 元 素 的 定位 属性 之 前 试图 移动 它们 ， 它 们 只 会 保持 静止 不 动 。 

【示例 】 设 置 一 个 动画 队列 ， 在 2 秒 内 向 右 下 角 移动 图 像 ， 同 时 渐变 不 透明 度 为 50%， 动 画 完成 后 将 执 
行 回调 函数 ， 提 示 动 画 完 成 的 提示 信息 ， 演 示 效 果 如 图 9.11 所 示 。 

<script type="text/Javascript" > 

$(function(){ 

$("button").click(function() { 
$("p").animate({ 
left:200, 
top:200, 
opacity: .$ 
}, 2000, "linear", function() {alert(" 动画 完成 "):} ): 


折 颖 的 效果 。 例 如 ， 可 以 在 一 个 元 素 


}) 


1) 
</script> 


<button> 控制 按钮 </button> 
<p style="position:relative"><1img src="i1mages/l.pe" height="300" /></Pp> 


a 
DIE 


图 9.11 自 定义 效果 


< 匀 注意 : 当 清除 <p> 标签 中 的 position:relative 声明 之 后 ， 整 个 动画 将 显示 为 无 效 。 


9.2.4 售 止 动画 


使 用 jQuery 的 stop0 方法 可 以 随时 停止 所 有 在 指定 元 素 上 正在 运行 的 动画 。 具 体 


stop([clearQueuel|, [JumpToEnd|) 
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加 ”clearQueue: 一 个 布尔 值 ， 指 示 是 否 取消 以 列队 动画 ， 默 认 值 为 false。 
加 ”jumpToEnd: 一 个 布尔 什 ， 指 示 是 否 当 前 动画 立即 完成 ， 默 认 值 为 false。 
当 一 个 元 素 调 用 stop0 方法 之 后 ， 当 前 正在 运行 的 动画 ( 如 果 有 ) 立即 停止 。 


< 外 注意 : 回 如 果 一 个 元 素 用 slideUp0 隐藏 ，stop0 方法 被 调用 ， 则 元 素 现 在 仍然 被 显示 ， 但 将 是 先前 


高 度 的 一 部 分 。 不 调用 回调 函数 。 

回 如果 同 一 元 素 调 用 多 个 动画 方法 ， 则 后 来 的 动画 被 放置 在 元 素 的 效果 队列 中 。 这 些 动画 不 
会 开始 ， 直 到 第 一 个 完成 。 当 调用 stop0 方法 的 时 候 ， 队 列 中 的 下 一 个 动画 立即 开始 。 如 
果 clearQueue 参数 被 设置 为 true 值 ， 那 么 在 队列 中 未 完成 的 动画 将 被 删除 并 永远 不 会 运行 。 

回 如果 jumpToEnd 参数 提供 true 值 ， 当 前 动画 将 停止 ， 但 该 元 素 是 立即 给 予 每 个 CSS 属性 的 
目标 值 。 用 上 面 的 slideUp0 为 例子 ， 该 元 素 将 立即 隐藏 。 如 果 提 供 回 调 函 数 ， 将 立即 被 调 
用 。 当 需要 对 元 素 运行 mouseenter 和 mouseleave 动画 时 ，stop() 方法 明显 是 有 效 的 。 


【示例 】 当 单 击 第 一 个 按钮 时 ， 可 以 随时 单 击 第 二 个 按钮 停止 动画 的 演示 ， 如 图 9.12 所 示 。 


<script type="text/Javascript" > 
$(function(){ 
$("input").eq(0).click(function(){ 
$("div").animate( { 
tontSlze : "10em" 
}, 8000): 
}); 
$("input").eq(1).click(function(){ 
$("div").stop():; 
月 


}) 
</script> 


<input type="button" value=" 自 定义 动画 " /><input type="button" value=" 停止 动画 " 廊 
<div style="border:solid 1px red:"> 自 定 义 动画 </div> 


| -各 httpiwilecalho., ~ 仿 避 目 曙 Iocalhost x 但 7 


| 自主 光 动 画 | 个 出 动 下 


图 9.12 控制 动画 


深 提 示 : stop0) 方法 包含 两 个 可 选 的 参数 ， 


第 一 个 参数 表示 布尔 值 ， 如 果 设 置 为 tue， 则 清空 队列 ， 立 即 结束 所 有 动画 。 如 果 设 置 为 
false， 则 如 果 动 画 队 列 中 有 等 待 执行 的 动画 ， 会 立即 运行 队列 后 面 的 动画 。 

第 二 个 参数 也 是 一 个 布尔 值 ， 如 果 设 置 为 tue， 则 会 让 当前 正在 执行 的 动画 立即 完成 ， 并 
且 重 设 show 和 hide 的 原始 样式 ， 调 用 回调 函数 等 。 
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9.2.5 天 闭 动 图 


除 定义 stop0 方法 外 ，jQuery 还 定义 了 o 企 属性 ， 当 这 个 属性 设置 为 tue 的 时 候 ， 调 用 时 所 有 动画 方法 
将 立即 设置 元 素 为 它们 的 最 终 状 态 ， 而 不 是 显示 效果 。 该 属性 解决 了 jQuery 动画 存在 的 以 下 几 个 问题 。 

回 jQuery 被 用 在 低 资 源 设备 。 

加 ”动画 使 用 户 遇 到 可 访问 性 问题 。 

加 动画 可 以 通过 设置 这 个 属性 为 false 而 重新 打开 。 

【示例 】 首 先 调 用 jQuery 信 空间 下 的 属性 off， 设置 该 属性 值 为 tue， 即 关闭 当前 页 面 中 所 有 的 jQuery， 
因此 下 面 按钮 所 绑 定 的 jQuery 动画 也 是 无 效 的 ， 当 单 击 按钮 和 时， 直接 显示 animate( 方法 的 第 一 个 参数 设置 | 
的 最 终 样式 效果 。 

<script type="text/Javascript" > 

$(function(O) { 

J]Query.fx.off = true: 
$("input").click(functionO { 


$("div").animate( { 
tontSlze : "10em" 
}, 8000):; 
六 
}) 
</script> 


<input type="button" value=" 自 定义 动画 " 放 
<div style="border:solid 1px red:"> 自 定义 动画 </div> 


关闭 jQuery 动画 ， 对 于 配置 比较 低 的 计算 机 ， 或 者 遇 到 了 可 访问 性 问题 ， 是 非常 有 帮助 的 。 如 果 要 重 
新 开 司 所 有 动画 ， 只 需要 设置 jQuery. 你.o 企 属性 值 为 false 即 可 。 


9.2.6 设置 动 男 频率 


使 用 jQuery 的 interval 属性 可 以 设置 动画 的 频率 ， 以 上 毫秒 为 单位 。 jQuery 动画 默认 是 13 毫秒。 修改 
jQuery. 仅 .interval 属性 值 为 一 个 较 小 的 数字 可 能 使 动画 在 浏览 右 中 运行 更 流畅 ， 如 Chrome 浏览 副 ， 但 这 样 | 
做 有 可 能 影响 性 能 。 / 

【示例 】 修 改 jQuery 动画 的 帧 频 为 100， 会 看 到 更 加 精细 的 动画 效果 。 


<script type="text/Javascript" > 

$(function(O) { 

JQuery.fx.mterval = 100: 
$("input").click(functionO { 

$("div").toggle( 3000 ): 

1): 

}) 

</script> 

<style type="text/css"> 

dv 1 width:$S00px: height:300px: margln:Spx: foat:left: backeround:ereen: } 

</style> 
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<input type="button" value=" 运行 动画 "> 
<div></dIiv> 


9.2.7 ”延迟 动 田 


delay0 方法 能 够 延迟 动画 的 执行 ， 用 法 如 下 : 
delay(duratton. [queueName|) 


参数 说 明 如 下 : 

加 duration: 用 于 设 定 队列 推 妈 执行 的 时 间 ， 以 这 秘 为 单位 的 整数 。 

加 ”queueName: 作为 队列 名 的 字符 串 ， 默 认 是 动画 队列 低 。 

delay0 方法 允许 将 队列 中 的 函数 延 时 执行 。 它 既 可 以 推迟 动画 队列 中 函数 的 执行 ， 也 可 以 用 于 上 自 定 义 队 
列 延 迟 时 间 是 以 毫秒 为 单位 的 ， 数 值 越 大 ， 动 画 越 慢 。 字 符 串 'fast 和 'slow' 分 别 代表 200 和 600 毫秒 的 延 时 。 

【示例 】 在 <div id="foo"> 的 slideUpO 和 fadeIn0 动画 之 间 设 置 800 毫秒 的 延 时 。 

$(#too').slldeUp(300).delay(800).ftadeIn(400): 


当 执 行 这 条 语句 时 ， 这 个 元 素 会 在 300 毫秒 卷 起 动画 ， 然 后 在 400 上 毫秒 淡 入 动画 前 暂停 800 上 毫秒。 
jQuery.delay0 用 在 jQuery 动画 效果 和 类 似 队列 中 是 最 好 的 ， 但 不 能 替代 JavaScript 原 生 的 setTimeoutO 陋 数 ， 


后 


更 适用 于 通常 情况 。 


9.3 案例 实战 


本 节 将 通过 多 个 案例 练习 jQuery 动画 设计 。 


9.3.1 折 又 面板 


折 丢 是 网 页 设计 中 经 稼 用 到 的 效果 ， 实 现 起 来 比较 简单 。 为 了 技术 的 规范 性 和 适应 性 ， 本 节 将 对 
JavaScript 代码 进行 简单 的 封装 ， 实 现在 相同 的 结构 和 类 样式 下 都 可 以 获得 相同 的 折 和 震 效 果 ， 滨 了 示 效 果 如 图 
9.13 所 示 。 


ee 一 I Ee httpyilocalhost:B0en ryeibetest hbml 


图 9.13 ” 折 委 效果 
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【操作 步 又 】 | 
第 1 步 ， 首 先 定制 折 又 面板 的 HTML 结构 。 本 例 选用 dl、dt 和 dd 这 3 个 元 素 配合 使 用 ， 既 符合 语义 
性 ， 也 方便 管理 。 设 计 文档 中 包含 collapse 类 样式 的 dl 元素， 只 要 包含 一 个 dt 和 dd 子 元 素 ， 都 可 以 拥有 
相同 的 折 登 效 打 。 
<dl class="collapse"> 
<dt> 标题 栏 </de> 
<dd> 内 容 框 <br /><img src="images/bg2.jpg" height="200" /></dd> 
</d> 


第 2 步 ， 设 计 折 登 面板 样式 。 关 于 该 模块 的 样式 设计 此 处 不 再 说 明 ， 读 者 可 以 参考 本 书 配套 资源 中 的 | 
示例 源 代码 。 | 
第 3 步 ， 使 用 jQuery 来 实现 折 番 效果。 由 于 jQuery 已 经 封装 了 getElementsByClassName()、show( 和 | 
hide0 方法 ， 所 以 可 以 直接 调用 。 实 现 折 蕉 效 果 的 详细 代码 如 下 : / 


<script type="text/Javascript"> 


$(functionOf / 页 面 初始 化 处 理 图 数 
vart=[]: /定义 空 数组 
var dt = $("dl.collapse dt"): /获取 类 名 为 collapse 的 由 元 素 包 含 的 所 有 dt 子 元 素 
Var dd = $("dl.collapse dd"); /获取 类 名 为 collapse 的 dl 元 素 包 含 的 所 有 dd 子 元 素 
dt.each(function(D) { / 通 历 所 有 生 元 素 ， 并 向 因数 传递 届 历 序号 
t[i] = false: /设置 折 羡 初始 状态 
$(dt[i]).click((fanction(i,dqd){ /为 当前 dt 元素 绑 定 click 事件 处 理 消 数 
return functionOf // 返回 一 个 团 包 了 明 数 ， 闭 包 能 够 存储 传递 进来 的 动态 参数 值 
if) 
$(dd).show0: / 显示 元 素 
tli] = false:; 
telset{ 
$(dd).hide(): / 隐藏 元 素 
ti] = troe; 
} 
} 
Di.dd[iD)): // 癌 当 前 执行 清 数 中 传递 参数 
}) 
}) 
</script> 


使 用 jQuery 设计 的 思路 与 JavaScript 设计 思路 完全 相同 ,不 过 jQuery 已 经 封 小 了 getElementsByClassName()、 | 
show0O 和 hide0 方法 ， 所 以 就 会 节省 很 多 代码 。 同 时 jQuery 使 用 each0 方法 封装 了 for 循环 结构 ， 实 现 快 
捷 遍 爵 文档 结 点 。each0 方法 包含 一 个 默认 的 参数 ， 该 参数 可 以 传递 般 历 过 程 中 元 素 的 序列 位 置 ， 以 方 使 动 ， 
态 跟 踊 每 个 元 素 。 / 

考虑 到 在 元 素 遍 历 的 过 程 中 ,动态 定位 元 素 比较 困难 ， 这 里 使 用 了 闭 包 消 数 存储 元 素 的 序列 位 置 ， 由 | 
于 在 财 包 中 无 法 访问 闭 包 图 数 外 的 对 象 ， 所 以 还 需要 加 其 传递 当前 要 操作 的 元 素 对 象 。 


< 征 注意 : 在 多 层 说 套 结 构 中 ,使 用 大 括号 和 小 括号 时 ， 和 避免 缺少 小 括号 运算 符 ， 如 $(dt[i]). click((function 
(1,dd){ 1})(1,dd[1]));。 
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”9.3.2 ” 树 形 结构 


文件 系统 通常 以 层次 结构 列表 形式 显示 ， 在 层次 结构 列表 里 文件 夹 包 含 的 内 容 相互 柑 套 ， 以 便 
种 复杂 的 包含 关系 ， 在 网 页 中 经 常见 到 这 种 类 似 树 形 动画 反 
另外 ， 在 网 页 中 看 到 的 多 级 菜单 也 是 一 种 经 典 的 树 形 结构 。 


表示 各 
设计 效果 ， 如 目录 导航 ， 效 果 如 图 9.14 所 示 。 


并 


图 9.14 树 形 结构 


| 【操作 灶 又 】 
第 1 步 ， 设计 向 i HTML 结构 。 从 语义 性 角度 考虑 ， 选 择 列表 结构 是 最 恰当 的 ， 用 户 可 以 使 用 

span 元 素 实 于 的 显示 效果 。 列 表 结 构 在 多 层 能 套 时 会 自动 显示 出 多 层 结构 的 关系 ， 即 使 不 使 用 CSS 进 
行 样式 设计 ， 原 始 续 4 构 仍然 可 以 一 目 了 然 。 本 案例 树 形 动画 的 HTML 代码 如 下 : 


<U] class="tree"> 
<]i> 首页 </i> 
<li> 新 闻 
<1ul> 
<li> 国内 新 闻 </li> 
<li> 国际 新 闻 </li> 
</ul> 
</> 
<li> 科技 
<1ul> 
<li> 桌面 科技 </li> 
<li> 移动 科技 
<ul> 
<l>1Phone</]i> 
<]>HTC </1> 
<]i>Androld</1> 
</ul> 
</> 
<li> 应 用 科技 </li> 
</ul> 
</l> 
<li> 社会 < 
</ul> 


整个 树 形 动画 包含 在 u 容 天 中 ， 每 个 开元 素 作 为 一 个 选项 进行 呈现 ， 不 同 层次 的 结构 分 别 以 ul 于 元 素 
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进行 包 了 里 ， 从 而 实现 层 层 航 套 的 关系 。 | 
第 2 步 ， 使 用 JavaScript 直接 设计 树 形 动画 的 思路 。 | 
先 获取 树 形 动画 中 所 有 上 i 元素， 因为 元 素 代表 一 个 选项 ， 不 管 该 选项 处 于 什么 层次 位 置 。 然 后 , 遍 
历 fi 元 素 集 合 ， 在 遍历 过 程 中 检测 当前 fi 元 素 是 否 包 含 Ul 元素 。 如 果 包 含 Ud 元 素 ， 则 设置 临时 标识 变量 b 
为 ttue， 否 则 设置 变量 b 为 false。 
加 如 果 b 为 tue， 则 设置 当前 工 元 素 的 样式 (如 鼠标 样式 、 列 表 项 目 符号 )， 并 获取 1 元 素 包 含 的 第 
一 个 UL 元素 ， 并 隐藏 该 ul 元素。 然后 为 当前 工 元 素 绑 定 click 事件 处 理 曙 数 。 在 该 事件 处 理 咀 数 
中 ,根据 ul 元 素 是 否 显 示 为 条 件 ， 分 别 隐藏 或 者 显示 ul 元素， 同时 动态 修改 当前 元素 的 样式 。 
回 如 果 b 为 false， 则 设置 当前 芋 元 率 的 样式 为 默认 状态 。 
第 3 步 ， 为 了 避免 单 击 当 前 元素 的 子 元 素 时 触发 cilck 事件 ， 应 该 检测 当前 单 击 的 元 素 是 否 为 工 元 素 。 
为 此 ， 可 以 使 用 Event 对 象 的 target ( 菲 容 正 ) 或 srcElement ( 兼容 DOM ) 属性 进行 判断 。 完 整 的 JavaScript 


<script type="text/Javascript"> 


window.onload = functionO // 页 面 初始 化 处 理 消 数 
var li 二 document.getElementsByTagName("li"); // 获取 页 面 中 所 有 li 元素 


for(var i= 0: i< lilength: i++ ){ /遍历 数组 
var child = lifi].childNodes: // 获取 当前 元 素 包 含 的 所 有 子 节点 
var b = false: 1/ 定义 临时 变量 ， 并 初始 化 为 false 
for(var j=0; j<childlength:j+Hb{f ”// 遍历 当前 i 元素 包 含 的 节点 ， 并 检测 是 否 包含 ul 元素 
it(child[]|.nodelype — 1 && child|]|.nodeName.toLowerCase() — "ul") 
b = true: 1/ 如果 二 元 素 包 含 由 元素 ， 则 设置 b 为 true 
} 
if(b) { /如果 开元 素 包含 岂 元 素 
li[il.style.cursor = pointer: /定义 当前 开元 素 的 鼠标 指针 样式 为 手 形 
li[il.style.listStyleImage = url(imasges/+.gipb': // 修改 当前 元 素 的 选项 列表 图 标 形 状 
var ul 二 ”]i[i].getElementsByTagName("u1" [0]:; // 获取 第 一 个 ul 于 元素 
ul.style.display = "none": // 隐藏 第 一 个 由 元 素 
t[i] = true: 1/ 设置 当前 序号 位 置 的 数组 元 素 的 值 为 true 
1ifil.onclick = (fimction(0,li,i){// 绑 定 click 单 击 事件 处 理 果 数 
return fonction(e){ // 返回 闭 包 晴 数 | 
if(li — e.target | li — window.event.srcElement ){ // 如 果 当 前 元 素 就 是 事件 触发 的 目标 对 
/1/ 象 ， 则 允许 执行 。 这 样 做 的 目的 是 ， 
/避免 单 击 当 前 开元 素 的 子 元 素 时 也 触 


/发 cilck 事件 
1 tt // 如 果 当 前 数组 元 素 值 为 true 
o.style.display = ""; /恢复 显示 了 元 素 
li.stylelistStyleImage= mrl(imases/-.gip'，V 修改 fi 元素 项 目 列表 符号 
t[i] = false: / 切换 当前 数组 元 素 值 为 false 
} 
elsef 1// 如 果 当 前 数组 元 素 值 为 false 
o.style.display = "none": // 隐藏 显 示 Ul 元素 
li.style.listStyleImage 一 "url(images/+.gif)'; // 修改 元 素 项 目 列表 符 号 
t[i] = true: / 切换 当前 数组 元 素 值 为 true 
} 
} 
让 (e && e.stopPropagation ) 1// 兼 容 非 正 浏 览 占 
e.stopPropagation(): /多 阻止 事件 传播 


"A 
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alse /兼容 正 浏览 器 
window.event.cancelBubble = true: /阻止 事件 传播 
retum false: /避免 触发 默认 事件 
} 
2 | )GQLIifil5: / 调用 函数 ， 传 递 当前 下 元 素 及 其 包含 的 第 一 个 由 元 素 ， 以 及 当前 下 元 素 下 标 
| } 
a /如果 下 元 素 不 包含 由 元 素 
lifi].style.cursor = "default': /恢复 开元 素 的 鼠标 默认 样式 
1ifil.style.listStyleImasge = mone': /恢复 工 元 素 的 默认 列表 项 目 符号 
} 
} 
} 
</script> 


第 4 步 ， 根 据 JavaScript 设计 思路 ， 下 面 尝 试 使 用 jQuery 实现 相同 的 设计 效果 。 详 细 代 码 如 下 : 


<script type="text/Javascript"> 
$( function(O){ // 页 面 初始 化 处 理 函 数 
$( li:has(ul)' ).click( fanction( event ){// 如 果 开 元 素 包 含 则 ll 元素， 则 绑 定 click 事件 
lf ( this 一 eventtarget ) 1 // 如 果 当 前 二 元 素 就 是 事件 触发 的 目标 对 象 
if( $( this ).children(O.is( hidden ) ) { /W 如 果 当 前 二 元 素 的 子 元 素 隐 藏 ， 则 修改 二 元 素 的 项 目 列表 符 ， 
/并 显示 所 有 子 元 素 
$( this ).css( list-style-1mage', url(1mages/-.af)" ).chlldren().show(O): 


} 
else { // 否则 修改 1 元 素 的 项 目 列表 符号 ， 并 隐藏 所 有 子 元 素 
$( this ).css( list-style-1mage', url(1images/+.91f)' ).children().hide():; 
} 
} 
return false: 

}).css( { /设置 包含 则 子 元 素 的 开元 素 的 样式 
cursor : 'pointer' /设置 鼠标 样式 为 手 形 
Tist-style-image' : "rl(images/+.gif)  ” /W/ 设置 项 目 列 表 符号 为 减 号 样式 

}).childrenO hide(): // 隐藏 当前 元素 的 所 有 子 元 素 

$( li-not(:has(ul))' ).css( { // 如 果 二 元素 没有 包含 由 元 素 
cursor : "default' /恢复 默认 的 鼠标 样式 
ist-style-image' : mone' / 恢复 默认 的 项 目 列表 符号 

PE 

}); 
</script> 


9.3.3 选项 卡 


| 树 形 结构 是 一 种 多 层次 结构 ， 而 选项 卡 是 一 种 索引 结构 关系 。 通 过 Tab 索引 可 以 快速 定位 到 相应 的 容 
右 框 选项 。 在 Web 开发 中 ， 这 种 以 选项 卡 形式 设计 的 页 面 或 者 模块 比较 常见 ， 如 图 9.15 所 示 。 

| 【操作 步骤 】 

| 第 1 步 ， 选 项 卡 的 结构 通常 按 二 叉 型 进行 设计 , 框 1 (分 支 一 ) 负责 组 织 Tab 标题 内 容 ， 而 框 2 (分 
， 支 二 ) 负责 组 织 每 个 选项 卡 对 应 的 显示 内 容 。 在 设计 时 ， 为 了 方便 控制 ， 应 确保 Tab 标题 序列 与 内 容 序列 
”一 一 对 应 ， 这 样 可 以 方便 程序 进行 控制 。 本 案例 的 HTML 结构 代码 如 下 : 
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| 


<div class= "tab'"> 
<ul> <!-- 选项 卡 标题 框 ”--> | 
<li>Tab1</li> | 
<li>Tab2</li> | 
<li>Tab3</li> | 
</ul> | 
<ol> <!-- 选项 卡 内 容 框 ”--> | 
<l><1meg src="i1mages/bpg2.jpe” width="450" /></]1> | 
<]i><img src="images/bg3.jpe" width="450" /></li> | 
<l><1meg src="i1mages/bpg4.jpe” width="450" /></]1> 
</ol> | 
</div> 


| 

第 2 步 ， 使 用 JavaScript 直接 设计 选项 卡 的 思路 : 先 使 用 CSS 设计 4 对 类 样式 ， 分 别 用 来 控制 标题 栏 和 

内 容 框 的 显 隐 样式 。 使 用 JavaScript 设计 在 默认 状态 下 标题 栏 和 内 容 框 的 类 样式 ， 然 后 通过 遍历 方式 为 每 个 
| 
/ 


标题 栏 绑 定 mouseover 事件 处 理 函 数 ， 设计 当 鼠 标 经 过 标题 栏 时 ， 隐 藏 所 有 内 容 框 ,修改 所 有 标题 的 类 样 

式 ， 并 显示 该 标题 栏 的 样式 和 现实 所 对 应 的 内 容 框 。 

使 用 JavaScript 实现 选项 卡 功能 的 完整 代码 如 下 : 

<ScIlpt type="text/Javascript"> 

/ 为 document 对 象 扩 展 getElementsByClassName (方法 

lf(!document.getElementsByClassName){ | 
document.getElementsByClassName = function(className, element){ 


Var children = (element || document).getElementsByTagName( ™'): | 
Var elements = new Array(); | 
for (var i=0: i<children.length: 1++){ 
var child = children[i]: | 
Var classNames = chlld.className.spllit( "): | 

for (var J]=0; Jj<classNames.length: J++){ | 

1f (classNames|]| == className){ | 
elements.push(child): | 

break: | 
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} 
上 
} 
return elements: 


} 

window.onload = function(){ 
var tab = document.getElementsByClassName("tab")[0]: /W/W/ 获取 选项 卡 的 外 框 
var Ul = tab.getElementsByTagName("ul" [0]: ”// 获取 选项 卡 标题 栏 的 外 框 
var ol = tab.getElementsByYTasgName("ol")[0]: ”// 获取 选项 卡 内 容 框 的 外 框 


var uli= ul.getElementsByTagName("li"): /获取 所 有 标题 栏 选项 
var oli = ol.getElementsByTagName("li"): /获取 所 有 内 容 选 项 
for(var i=0: i<uli.length: i+HH){ 1/ 过 历 标 题 栏 选项 
uli[il.className = "normal": /设置 所 有 标题 栏 选 项 的 类 样式 为 普通 样式 
} 
for(var i=0: i<olilength: i++){ 1/ 裔 历 内 容 框 选项 
olilil].className = "none": /设置 所 有 内 容 框 选项 的 类 样式 为 隐藏 
} 
uli[0].className = "hover : /设置 第 一 个 标题 栏 选项 为 凸 起 显示 
oli[0].className = "show": 1/ 设置 第 一 个 内 容 框 选项 为 显示 出 来 
var addEvent=function(e, fh) { / 上 自 定 义 绑 定 mouseover 事件 商 数 
if(document.addEventListener){ 兼容 非 正 浏览 需 
return e.addEventListener("mouseover", fn, false): 
} 
else if(document.attachEvent){ /兼容 正 训 览 般 
return e.attachEvent("onmouseover", fn); 
} 
1 
for(var j = 0: j <uli.length: j ++ ){ /遍历 标题 栏 选项 
(function(j,uli,oli){ /调用 匿名 函数 
addEvent(uli[j], fanction0f 为 当前 标题 栏 选项 元 素 绑 定 mouseover 事件 
forlvarn=0:n<ulilength:n+H)f ”/W 裔 历 标 题 柱 选项 
ulifn].className = "normal":// 恢复 所 有 标题 栏 选项 为 普通 显示 状态 
oliln]l.className = "mone": /隐藏 所 有 内 容 框 选项 
} 
ulilj].className = "hover": /设置 当前 标题 栏 为 凸 起 效果 
oli[j].className = "show": 1/ 显示 当前 标题 栏 对 应 的 内 容 框 选项 
00l,0l); 1/ 把 当前 序号 、 标 题 栏 选 项 数组 和 内 容 框 选项 数组 传递 进去 
} 
} 
</script> 


第 3 步 ， 根 据 JavaScript 设计 思路 ， 使 用 jQuery 实现 相同 的 设计 效果 ， 编 写 的 代码 会 非常 简洁 。 
<script type=—"text/Javascript"> 


$( functionO{ / 页 面 初始 化 事件 处 理 阴 数 
var $uli = $(".tab ul 1i"): 1/ 获取 所 有 标题 栏 选项 元 素 
var $oli = $(".tab ol 1i"): 1/ 获取 所 有 内 容 框 选项 元 素 
$uli.addClass("normal"): 1/ 为 所 有 标题 栏 选项 元 素 添 加 普通 类 样式 
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$oli.addClass("none"): // 为 所有 内 容 框 选项 元 素 添 加 隐藏 类 样式 
$uli[0].className = "hover": /初始 化 第 一 个 标题 栏 选项 显示 为 凸 起 效果 
$oli[0].className = "show": 1/ 初始 化 第 一 个 内 容 框 选项 显示 出 来 
$uli.each(function(n){ 1/ 遍历 所 有 标题 栏 选 项 


$(this).mouseover(function0{ ”// 为 每 个 选项 绑 定 mouseover 事件 处 理 限 数 
$uliremoveClass().addClass("normal"): ”// 移 出 所 有 标题 栏 选 项 类 样式 ,恢复 普 通 显示 
$(this).removeClass().addClass("hover"): /移出 所 有 类 样式 ， 为 当前 标题 栏 设置 高 之 显示 
$oli.removeClass().addClass("none"): 1// 移 出 所 有 内 容 框 选项 的 类 样式 ,恢复 隐藏 显示 
$($oli[n]).removeClassO.addClass("show"): // 移出 所 有 类 样式 ， 为 当前 内 容 框 设置 显示 

}) 

}) 
入 


</script> 
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本 节 提 供 多 个 jQuery 动画 操作 案例 ， 感 兴趣 的 读者 可 以 扫 人 码 阅 读 。 
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( 贸 m 视频 讲解 . 1 小 时 14 分 钟 ) 


JavaScript 以 事件 驱动 实现 页 面 交 互 。 事 件 了 驱动 的 核心 : 以 消息 为 基础 ， 以 事件 来 
了 驱动。 例如 ， 当 浏览 器 加 载 完 华文 档 后 ， 会 生成 一 个 事件 ; 当 用 户 单 击 基 个 按钮 时 ， 也 
会 生成 一 个 事件 。 虽然 利用 传统 的 JavaScript 事件 能 完成 这 些 交 互 ， 但 JQuery 增加 并 扩 
展 了 基本 的 事件 处 理 机 制 ，jQuery 不 仅 提 供 了 和 更 加 优雅 的 事件 处 理 语 法 ， 而 且 极 大 地 增 
强 了 事件 处 理 能 力 。 


【学 习 重 点 】 

| 使 用 ]Query 绑 定 事件 。 
| 使 用 jQuery 事件 方法 。 
| 注销 事件 。 

My 使 用 ]Query 事件 对 象 。 
pp 自 定义 事件 。 

| 页 面 初 始 化 处 理 。 
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10.1 JavaScript 事件 基础 
本 方 将 简单 介绍 JavaScript 事件 的 基本 概念 和 使 用 。 


10.1.1 JavaScript 事件 发 展 历史 


最 早 在 正 3.0 和 Netscape 2.0 浏览 器 中 出 现 事 件 。 互 联网 初期 网 速 是 非常 慢 的 ， 为 了 解决 用 户 漫长 的 等 
待 ， 开 发 人 员 把 服务 器 端 处 理 的 任务 部 分 前 移 到 客户 端 ， 让 客户 端 JavaScript 脚本 代替 解决 。 

例如 ， 对 用 户 输入 的 表单 信息 进行 验证 等 ， 于 是 就 出 现 各 种 啊 应 用 户 行 为 的 事件 ， 如 表单 提交 事件 、 
文本 输入 时 键盘 事件 、 文 本 框 中 文本 发 生变 化 触发 的 事件 、 选 择 下 拉 菜 单 时 引发 的 事件 等 。 因 此 ， 早 期 的 
事件 多 集中 在 表单 应 用 上 。 

DOM 2 规范 开始 尝试 标准 化 DOM 事件 ， 直 到 2004 年 发 布 DOM 3.0 时 ，W3C 才 完 善事 件 模 型 。IE 9、 
Firefox 、Opera 、Safari 和 Chrome 主流 训 览 器 都 已 经 实现 了 DOM 2 事件 模块 的 核心 部 分 。 正 8 及 其 早期 版 
本 使 用 正 私有 的 事件 模型 。 

通俗 地 说 ， 事 件 就 是 文档 或 浏览 器 窗口 中 发 生 的 一 些 特定 交互 行为 ， 如 加 载 、 单 击 、 输 入 、 选 择 等 。 
可 以 使 用 侦 听 器 预订 事件 ， 即 在 特定 事件 上 绑 定 事件 监听 函数 ， 以 便 在 事件 发 生 时 执行 相应 的 代码 。 当 事 
件 发 生 时 ,浏览 融会 自动 生成 事件 对 象 (event )， 并 沿 着 DOM 节点 有 序 进行 传播 ， 直 到 被 脚本 捕获 。 这 种 
观察 员 模 式 确 保 JavaScript 与 HTML 保持 松散 的 耦合 。 


10.1.2 事件 模型 


在 浏览 融 发 展 历 史 中 ， 出 现 了 以 下 4 种 事件 处 理 模 型 。 

回 ”基本 事件 模型 : 也 称 为 DOM 0 事件 模型 ， 是 浏览 器 初期 出 现 的 一 种 比较 简单 的 事件 模型 ， 主 要 
通过 事件 属性 ， 为 指定 标签 绑 定 事件 监听 图 数 。 由 于 这 种 模型 应 用 比较 广汉 ， 获 得 了 所 有 浏览 
器 的 支持 ， 目 前 依然 比较 流行 。 但 是 这 种 模型 对 于 HTML 文档 标签 依赖 严重 ， 不 利于 JavaScript 
独立 开发 。 

加 DOM 事件 模型 : 由 W3C 制订 ,是 目前 标准 的 事件 处 理 模型 。 所 有 符合 标准 的 浏览 器 部 支持 该 模 
型 ， 正 怪异 模式 不 支持 。DOM 事件 模型 包括 DOM 2 事件 模块 和 DOM 3 事件 模块 。DOM 3 事件 
模块 为 DOM 2 事件 模块 的 升级 版 ， 略 有 完善 ， 主 要 是 新 增 了 一 些 事情 类 型 ， 以 适应 移动 设备 的 开 
发 需要 ， 但 大 部 分 规范 和 用 法 保持 一 致 。 

回 正事 件 模 型 : 正 4.0 及 其 以 上 版 本 浏览 器 文 持 ， 与 DOM 事件 模型 相似 ， 但 用 法 不 同 。 

名 ”Netscape 事件 模型 : 由 Netscape4 浏 览 华 实现 ， 在 Netscape 6 中 停止 支持 。 


10.1.3 事件 传播 


一 个 事件 发 生 以 后 ， 它 会 在 不 同 的 DOM 节点 之 间 传 播 ， 也 称 为 事件 流 。 这 种 传播 分 成 三 个 阶段 ， 具 
体 说 明 如 下 : 
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捕获 阶段 : 事件 从 window 对 象 沿 腹 文 档 树 癌 下 传播 到 目标 和 节点， 如果 目标 节点 的 任何 一 个 上 级 节 
点 注册 了 相同 事件 ， 那 么 事件 在 传播 的 过 程 中 就 会 首先 在 最 接近 顶部 的 上 级 节点 执行 ， 依 次 网 下 
传播 。 

目标 阶段 : 注册 在 目标 节点 上 的 事件 被 执行 。 

冒 泡 阶段 : 事件 从 目标 节点 辐 上 触发 ， 如 采 上 级 点 注册 了 相同 的 事件 ， 将 会 逐 级 啊 应 ， 依 次 加 上 
传播 。 


事件 传播 的 最 上 层 对 象 是 window， 接 着 依次 是 document、html ( document.documentElement ) 和 body 
(document.body )。 也 就 是 说 ， 如 果 body 元 素 中 有 一 个 div 元 素 ， 单 击 该 元 素 。 事 件 的 传播 顺 


序 ， 在 捕获 阶段 依次 为 window、document、html、body、div， 在 冒 泡 阶 段 依 次 为 div、body、 
html 、document、wWindow。 


关于 事件 流 的 示例 代码 和 不 同 阶段 响应 的 比较 效果 ， 请 扫 码 阅读 。 


10.1.4 ”事件 类 型 


根据 触发 对 象 不 同 ， 可 以 将 浏览 旧 中 发 生 的 事件 分 成 不 同 的 类 型 。DOM 0 事件 定义 了 以 下 事件 类 型 。 


MI 


MI 


在 DOM 2 事件 模型 中 ， 事 件 模块 包含 4 个 子 模块 ， 每 个 子 


鼠标 事件 : 与 鼠标 操作 相关 的 各 种 行为 ， 可 以 细 分 为 跟踪 鼠标 当前 定位 ( 如 mouseover、mouseout ) 
的 事件 和 跟踪 鼠标 单 击 ( 如 mouseup 、mousedown 、click ) 的 事件 。 

键盘 事件 : 与 键盘 操作 相关 的 各 种 行为 ， 包 括 追 踪 键 盘 敲 击 和 其 上下文， 追踪 键盘 包括 keyup、 
keydown 和 keypress 3 种 类 型 。 

页 面 事件 : 关于 页 面 本 身 的 行为 ， 如 当 首次 载 入 页 面 时 触发 load 事件 和 离开 页 面 时 触发 unload 和 
beforeunload 事件 。 此 外 ，JavaScript 的 错误 使 用 错误 事件 追踪 ， 可 以 让 用 户 独立 处 理 错误 。 

UI 事件 : 追踪 用 户 在 页 面 中 的 各 种 行为 ， 如 focus ( 获得 焦点 ) 和 Pblur ( 失去 焦点 ) 事件 用 来 监听 
用 户 在 表单 中 的 输入 ，submit 事件 用 来 追踪 表单 的 提交 ，change 事件 监听 用 户 在 文本 框 中 的 输入 ， 
而 select 事件 可 以 监听 下 拉 汪 单 发 生 更 新 等 。 

i 块 提供 对 某 类 事件 的 支持 。 例 如 ， 


MouseEvent 子 模块 提供 了 对 mousedown 、mouseup 、mouseover 、mouseout 和 click 事件 类 型 的 支持 。 包 括 
IE 9 在 内 的 所 有 主流 浏览 兹 都 支持 DOM 2 事件 类 型 。 


Vw 


四 


HTMLEvents: 接口 为 Event， 支 持 的 事件 类 型 包括 abort、blur、change、error 、focus 、load 、resize、 
scroll 、select、submlt 、unload 。 

MouseEvents: 接口 为 MouseEvent， 支 持 的 事件 类 型 包括 click、mousedown、mousemove、mouseout、 
mouseover 、mouseup。 

UIEvents: 接口 为 UIEvent， 具 体 支 持 事 件 类 型 请 扫 公 了解。 

MutationEvents: 接口 为 MutationEvent， 有 具体 支持 捉 件 类 型 请 扫 公 了 解 。 


【 折 展 】 


DOM 2 类 型 分 类 说 明 请 扫 人 码 了 解 。 

HTMLEvents 和 MouseEvents 模块 定义 的 事件 类 型 与 基础 事件 模型 中 的 事件 类 型 相似 ; 
UIEvents 模块 定义 的 事件 类 型 与 HIML 表单 元 素 支 持 的 获得 焦点 、 和 失去 焦点 和 单 击 事件 功能 
类 似 ; MutationEvents 模块 定义 的 事件 是 在 文档 改变 时 生成 的 ， 一般 不 常用 。 
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10.1.5“” 绑 定 事件 


在 基本 事件 模型 中 ，JavaScript 文 持 两 种 绑 定 方式 。 

1， 静 态 绑 是 

把 JavaScript 脚本 作为 属性 值 ， 直 接 赋予 事件 属性 。 

【 示例 1】 把 JavaScript 脚本 以 字符 串 的 形式 传递 给 onclick 属性 ， 为 <button> 标签 绑 定 click 事件 。 当 
单 击 按钮 时 就 会 触发 click 事件 ， 执 行 这 行 JavaScript 脚本 。 

<button onclick='"alert(' 你 单 击 了 一 次 ! 7 按钮 <button> 


2. 动态 绑 定 

使 用 DOM 对 象 的 事件 属性 进行 赋值 。 

【 示例 2】 使 用 document.getElementById0 方法 获取 button 元 素 ， 然 后 把 一 个 匿名 函数 作为 值 传递 给 
button 元 素 的 onclick 属性 ， 实 现 事件 绑 定 操作 。 

<button id="btn"> 按钮 </button> 

<script> 

Var button = document.getElementBylId("btn"): 

button.onclick = function(){ 

alert(" 你 单 击 了 一 次 ! "): 
} 
</script> 


动态 绑 定 可 以 在 脚本 中 直接 为 页 面 元 素 附加 事件 ， 不 破坏 HTML 结构 ， 比 静态 绑 定 灵活 。 


10.1.6 事件 监听 函数 


监听 函数 是 事件 发 生 时 ， 程 序 所 要 执行 的 函数 ， 它 是 事件 驱动 编程 模式 的 主要 编程 方式 。 监 听 函 数 有 
时 也 称 为 事件 处 理 函 数 或 事件 处 理 器 。 
DOM 提供 3 种 方法 ， 可 以 用 来 为 事件 绑 定 监听 胃 数 ， 有 具体 说 明 如 下 : 
1. HTML 标签 的 on- 属性 
HTML 语言 允许 在 元 素 标签 的 属性 中 直接 定义 某 些 事件 的 监听 代码 。 
【示例 1】 为 form 元 素 的 onsubmit 事件 属性 定义 字符 串 脚 本 ， 设 计 当 文本 框 中 输入 值 为 空 时 ， 定 义 事 
件 监 昕 函数 返 回 值 为 false。 由 于 该 返回 值 为 false， 将 强制 表单 禁止 提交 数据 。 
<torm 1d="forml1" name="ftorml1" method="post" action="http:/Wwww.mysite.cn/" onsubmit="1f(this.elements[0|.value. 
length—=0) Tetum false:"> 
姓名 : <input id="user" name="Uuser" type="text" > 
<input type="submit" name="btn" id="btn" value=" 提交 " 广 
</form> 


在 上 面 代 人 码 中 ，this 表示 当前 form 元 素 ，elements[0] 表示 姓名 文本 框 ， 如 果 该 文本 框 的 value.length 属 
性 值 长 度 为 0， 表 示 当 前 文本 框 为 空 ， 则 返回 false， 禁 止 提交 表单 。 


< 负 注意 : 使 用 这 个 方法 指定 的 监听 函数 ， 只 会 在 冒 泡 阶段 触发 。 同 时 ，on- 属性 的 值 是 将 要 执行 的 代码 ， 
而 不 是 一 个 函数 。 例 如 : 
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<1-- 正确 -一 

<body onload="doSomething()"> 

= 

<body onload="doSomething"> 

一 旦 指定 的 事件 发 生 ，on- 属性 的 值 将 被 原样 传 入 JavaScript 引 芝 执行 。 因 此 如 果 要 执行 函 
数 ， 不 要 豆 记 加 上 一 对 圆 括 号 o 

另外 ，Element 元 素 节 点 的 setAttribute() 方法 ， 其 实 设置 的 也 是 这 种 效果 。 例 如 : 

el.setAttribute(‘onclick', "doSomething()"): 


注 提示 : 事件 监听 函数 不 需要 参数 。 在 DOM 事件 模型 中 ， 事 件 监 听 函 数 默 认 包 含 event 参数 对 象 , event 


对 象 包含 事件 信息 ， 在 函数 内 进行 传播 。 
事件 监听 函数 一 般 没 有 明确 的 返回 值 。 不 过 在 特定 事件 中 ， 用 户 可 以 利用 事件 监听 函数 的 
返回 值 影响 程序 的 执行 ， 如 单 击 超 链 接 时 ， 茶 止 默认 的 跳 转 行为 ， 如 示例 1。 


2. Element 节点 的 事件 属性 
Element 节点 对 象 有 事件 属性 ， 同 样 可 以 指定 监听 函数 。 使 用 这 个 方法 指定 的 监听 录 数 ， 只 会 在 冒 泡 阶 


段 触 发 。 


【示例 2】 为 按钮 对 象 绑 定 一 个 单 击 事件 。 在 事件 监听 六 数 中 ,参数 e 为 形 参 ， 啊 应 事件 之 后 ， 浏 览 


会 把 event 对 象 传递 给 形 参 变量 e， 再 把 event 对 象 作为 一 个 实 参 进行 传递 ， 读 取 event 对 象 包含 的 事件 信 


日 


di 3 


在 事件 监听 函数 中 输出 当前 源 对 象 节点 名 称 ， 显 示 效 果 如 图 10.1 所 示 。 


<button id="btn"> 按钮 </button>= 

<script> 

var button = document.eetElementByld("btn"): 

button.onclick = function(e)t{ 
var € = € | Window.event: /兼容 DOM 事件 模型 和 正 模型 的 event 获取 方式 
document.write(e.srcElement ? e.srcElement : etarge0: /兼容 DOM 事件 模型 和 正 模型 的 event 属性 


} 
</script> 


Ea i = httpiiilocalhostinr = 四 We httpifilocalhest/irm 


[object HTMLButtonElement]| 


图 10.1 捕获 当前 事件 源 
在 处 理 event 参数 时 ， 应 该 判断 event 在 当前 解析 环境 中 的 状态 ， 如 果 当 前 浏览 器 支持 ， 则 使 用 event 


( DOM 事件 模型 ); 如 果 不 文 持 ， 则 说 明 当 前 环境 是 正 浏 览 希 ， 通 过 window.event 获取 event 对 象 。 


event.srcElement 表示 当前 事件 的 源 ， 即 啊 应 事件 的 当前 对 象 ， 这 是 正 模型 用 法 。 但 是 DOM 事件 模型 


不 支持 该 属性 ， 需 要 使 用 event 对 象 的 target 属性 ， 它 是 一 个 符合 标准 的 源 属 性 。 为 了 能 够 兼容 不 同 浏览 右 ， 
这 里 使 用 了 一 个 条 件 运算 符 ， 先 判断 event.srcElement 属性 是 否 存在 ， 否 则 使 用 event.target 属性 来 获取 当前 
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事件 对 象 的 源 。 

3. addEventListener() 方法 

通过 Element 节点 、document 节点 、window 对 和 象 的 addEventListener(0 方法 ， 也 可 以 定义 事件 的 监听 函 
数 ， 有 关 addEventListener0 方法 的 内 容 将 在 10.1.7 市 进行 详细 讲解 。 

在 上 面 三 种 方法 中 ， 第 一 种 方法 违反 了 HIML 与 JavaScript 代码 相 分 离 的 原则 ; 第 二 种 方法 的 缺点 是 同 
一 个 事件 只 能 定义 一 个 监听 图 数 ， 也 就 是 说 ， 如 果 定 义 两 次 onclick 属性 ， 后 一 次 定义 会 覆盖 前 一 次 。 因 此 ， 
这 两 种 方法 都 不 推荐 使 用 ， 除 非 是 为 了 程序 的 兼容 问题 ， 因 为 所 有 浏览 右 都 支持 这 两 种 方法 。 

addEventListener( 是 推荐 的 指定 监听 函数 的 方法 ， 它 有 如 下 优点 。 

贸 ” 可 以 针对 同一 个 事件 添加 多 个 监听 函数 。 

町 能 够 指定 在 哪个 阶段 (捕获 阶段 还 是 冒 泡 阶段 ) 触发 监听 函数 。 

回 除了 DOM 节点 ， 还 可 以 部 署 在 window、XMLHttpRequest 等 对 象 上 ， 等 于 统一 了 整个 JavaScript 


的 监听 函数 接口 。 
【拓展 】 
在 实际 编程 中 ， 监 听 函 数 内 部 的 this 对 象 ， 常 常 需要 指向 触发 事件 的 那个 Element 节点 。 


但 是 如 果 使 用 第 一 种 方法 ，this 将 指向 window 对 象 ， 如 何 解 决 这 个 问题 ? 请 扫 码 阅读 。 


10.1.7 注册 事件 


在 DOM 事件 模型 中 ， 通 过 调用 对 象 的 addEventListener0 方法 注册 事件 ， 用 法 如 下 : 


element.addEventListener(String type, Function listener, boolean UseCapture): 


回 type: 注册 事件 的 类 型 名 。 事 件 类 型 与 事件 属性 不 同 ， 事件 类 型 名 没有 on 前 级 。 例 如 ， 对 于 事件 

属性 onclick 来 说 ， 所 对 应 的 事件 类 型 为 click。 

加 ”listener: 监听 图 数 ， 即 事件 监听 图 数 。 在 指定 类 型 的 事件 发 生 时 将 调用 该 图 数 。 在 调用 这 个 困 数 

时 ， 默 认 传递 给 它 的 唯一 参数 是 event 对 象 。 
回 useCapture: 是 一 个 布尔 值 。 如 果 为 tue， 则 指定 的 事件 监听 函数 将 在 事件 传播 的 捕获 阶段 触发 ; 
如 果 为 false， 则 事件 监听 函数 将 在 冒 泡 阶段 触发 。 

【示例 1】 使 用 addEventListener0 方法 为 所 有 按钮 注册 click 事 件 。 首 先 ， 调 用 document 的 
getElementsByTagName() 方法 捕获 所 有 按钮 对 象 ; 然后 ， 使 用 for in 语句 遍历 按钮 集合 (btn )， 并 使 用 
addEventListener() 方法 分 别 为 每 个 按钮 注册 一 个 事件 也 数 ， 该 阴 数 获取 当前 对 象 所 显示 的 文本 。 

<button id="btn1" onclick="btm10:"> 按钮 1</button> 

<button id="btn2" onclick= "btn2(evenb:> 按钮 2</button> 


<script> 
var btn = document.getElementsByIaeName("button"); 人 捕获 所 有 按钮 
for(var iin btn){ /遍历 按钮 集合 
btnl1il.addEventListener("“click", function() + 
alert(this.innerHTML): 
}, true); // 为 每 个 按钮 对 象 注册 一 个 事件 监听 函数 ， 定 义 在 捕获 阶段 进行 响应 
} 
</script> 
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在 浏览 器 中 预览 ， 单 击 不 同 的 按钮 ， 浏 览 器 会 自动 弹出 对 


臣 ， 显 示 按 钮 的 名 称 ， 如 图 10.2 所 示 。 


图 10.2 ”响应 注册 事件 


便 提示 : 早期 契 浏 览 器 不 支持 addEventListener0 方法 ， 从 IE 8 开始 才 完 全 支持 DOM 事件 模型 。 
使 用 addEventListener() 方法 能 够 为 多 个 对 象 注 册 相 同 的 事件 监听 函数 ， 也 可 以 为 同一 个 对 
象 注册 多 个 事件 监听 函数 。 为 同一 个 对 象 注册 多 个 事件 监听 函数 对 于 模块 化 开发 非常 有 用 。 


” 【示例 2 为 段落 文本 注册 两 个 事件 : mouseover 和 mouseout。 当 鼠标 移 到 段落 文本 上 会 显示 为 蓝 色 背 
” 景 ， 而 当 鼠 标 移 出 段落 文本 时 会 自动 显示 为 红色 背景 。 这 样 就 不 需要 破坏 文档 结构 为 段落 文本 增加 多 个 事 
件 属性 。 


<p id="p1"> 为 对 象 注册 多 个 事件 </p> 
<script> 
var pl = document.getElementById("p1"):; // 捕获 段落 元 素 的 句柄 
pl.addEventListener("mouseover", function(){ 

this.style.backeround = blue': 
} , true); // 为 段落 元 素 注 册 第 一 个 事件 监听 函数 
pl.addEventListener("mouseout", function()1{ 

this.style.backeround = Ted : 


/ 为 段落 元 素 注 册 第 二 个 事件 监听 函数 


异型 使 用 attachEvent0 方法 注册 事件 ， 用 法 


element.attachEvent(etype,eventName) 


参数 说 明 如 下 : 
回 etype: 设置 事件 类 型 ， 如 onclick、onkeyup、onmousemove 等 。 
加 eventName: 设置 事件 名 称 ， 也 就 是 事件 监听 函数 。 
【示例 3】 为 段落 标签 <p> 注册 两 个 事件 : mouseover 和 mouseout， 设 计 当 鼠标 经 过 时 ， 段 落 文本 背景 
色 显 示 为 蓝 色 ， 当 鼠标 移 开 之 后 ， 青 景色 显示 为 红色 。 
<p id="p1">IE 事件 注册 </p> 
<script> 
var pl = document.getElementById("p1"); // 捕获 段落 元 素 
pl.attachEvent("onmouseover", function(){ 


如 下 : 
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pl.style.backeround = blue': 
}); // 注册 mouseover 事件 
pl.attachEvent("onmouseout", function(}){ 

pl.style.backeround = 'red': 
// 注册 mouseout 事件 
</script> 


六 提示 : 使 用 attachEvent0 注册 事件 时 ， 其 事件 监听 函数 的 调用 对 象 不 再 是 当前 事件 对 象 本 身 ， 而 是 
Window 对 人 象 ,因此 ， 事 件 函 数 中 的 this 就 指向 Window， 而 不 是 当前 对 办 ， 如 果 要 获取 当前 对 边 ， 
应 该 使 用 event 的 srcElement 属性 。 


< 负 注意 : 下 事件 模型 中 的 attachEventO 方法 的 第 一 个 参数 为 事件 类 型 名 称 ， 但 需要 加 上 on 前 级， 而 使 
用 addEventListener0 方法 时 ， 不 需要 这 个 on 前 缓 ， 如 click。 


【拓展 】 

DOM 的 事件 操作 (监听 和 触发 ) 都 定义 在 EventTarget 接口 。Element 节点 、document 节 
点 和 window 对 象 ， 都 部 署 了 这 个 接口 。 此 外 ，XMLHttbpRequest、AudioNode 、AudioContext 
等 浏览 化 内 置 对 象 也 部 署 了 这 个 接口 。 感 兴趣 的 读者 可 以 扫 码 了 解 该 接口 的 用 法 。 


10.1.8 ”销毁 事件 


在 DOM 事件 模型 中 ， 使 用 removeEventListener0 方法 可 以 从 指定 对 象 中 删除 已 经 注册 的 事件 监听 函 


element.removeEventListener(String type, Function listener, boolean UseCapture): 


参数 说 明 参 阅 10.1.7 节 addEventListener0 方法 的 参数 说 明 。 

【示例 1】 分 别 为 按钮 a 和 按钮 b 注册 click 事件 ， 其 中 按钮 a 的 事件 函数 为 ok0， 按 钮 b 的 事件 函数 为 
delete_ event0。 在 浏览 器 中 预览 ， 单 击 “点 我 ”按钮 将 弹出 一 个 对 话 框 ， 在 不 删除 之 前 这 个 事件 是 一 直 存 在 
的 。 单 击 “ 删 除 事件 ”按钮 之 后 ,“ 点 我 ”按钮 将 失去 效果 。 演 示 歼 果 如 图 10.3 所 示 。 


<input id="a" type="button" value=" 点 我 " 广 

<input id="b" type="button" value=" 删除 事件 " 广 

<script> 

var a = document.getElementByld("a"): /获取 按钮 a 

varb = document getElementById("b'): / 获取 按钮 b 

function okO1 // 按钮 a 的 事件 监听 了 清 数 
alert(" 您 好 ， 欢 迎 光 临 1"); 

} 

function delete eventO{ /按钮 b 的 事件 监听 消 数 
aremoveEventListener("click",ok,false):  // 移出 按钮 a 的 click 事件 

} 

a.addEventListener("click",ok,false): / 默认 为 按钮 a 注册 事件 

b.addEventListener("click",delete event,false): ”// 默认 为 按钮 b 注册 事件 

</script> 
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图 10.3 注销 事件 


六 提示 : removeEventListener0 方法 只 能 够 删除 addEventListener0 方法 注册 的 事件 。 如 果 直 接 使 用 


onclick 等 直接 写 在 元 素 上 的 事件 ， 将 无 法 使 用 removeEventListener( 方法 删除 。 


当 临 时 注册 一 个 事件 时 ， 可 以 在 处 理 完毕 之 后 迅速 删除 它 ， 这 样 能 够 节省 系统 资源 。 
IE 事件 模型 使 用 detachEvent0 方法 注销 事件 ， 用 法 如 下 : 
element.detachEvent(etype,eventName) 


参数 说 明 参 阅 10.1.7 节 attachEvent( 方法 的 参数 说 明 。 
由 于 下 怪异 模式 不 支持 DOM 事件 模型 ， 为 了 保证 页 面 的 兼容 性 ， 开 发 时 需要 兼容 两 种 事件 模型 以 实 


现在 不 同 浏览 器 中 具有 相同 的 交互 行为 。 


【示例 2】 设 计 段 落 标签 <p> 只 响应 一 次 鼠标 经 过 行为 。 当 第 二 个 鼠标 经 过 段落 文本 时 ， 所 注册 的 事件 


不 再 有 效 局 


二 id="p1">IE 事件 注册 </p> 
<script> 
var pl = document.getElementById("p1"): ”W/W/ 捕获 段落 元 素 
var fl = functionOf // 定义 事件 监听 晴 数 1 
pl.style.backeround = blue': 
rar 2 = functionO { // 定义 事件 监听 明 数 2 
pl.style.backeround = Ted : 
pl.detachEvent("onmouseover", 1): /W/W/ 当 触 发 mouseout 事件 后 ， 注 销 mouseover 事件 
pl.detachEvent("onmouseout", f2): / 当 触 发 mouseout 事件 后 ， 注 销 mouseout 事件 
pl.attachEvent("onmouseover", fl): /注册 mouseover 事件 
pl.attachEvent("onmouseout", f2): /注册 mouseout 事件 
</script> 


【示例 3】 为 了 能 够 兼容 IE 事件 模型 和 DOM 事件 模型 ,使 用 站 语句 判断 当前 浏览 器 支持 的 事件 处 理 模 


型 ， 然 后 分 别 使 用 DOM 注册 方法 和 正 注册 方法 为 段落 文本 注册 mouseover 和 mouseout 两 个 事件 。 当 触发 
mouseout 事件 之 后 ， 再 把 mouseover 和 mouseout 事件 注销 掉 。 


<p id="p1"> 注册 兼容 性 事件 </p> 


<script> 
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var pl = document.eetElementById("p1"): // 捕获 段落 元 素 
varfl = fonction0{ /定义 事件 监听 冰 数 1 


pl.style.backeround = blue': 


var f = functionO /定义 事件 监听 函数 2 
pl.style.backeround = Ted : 
if(pl.detachEvent){ /兼容 正事 件 模型 
pl.detachEvent("onmouseover", f1): / 注销 事件 mouseover 
pl.detachEvent("onmouseout", f2): // 注销 事件 mouseout 
} 
else{ /兼容 DOM 事件 模型 


pl.removeEventListener("mouseover", 旭 ): // 注销 事件 mouseover 
pl.removeEventListener("mouseout", 介 );，// 注销 事件 mouseout 


上 
if(pl.attachEvent){ /兼容 正事 件 模型 
pl.attachEvent("onmouseover", f1): // 注册 事件 mouseover 
pl.attachEvent("onmouseout", f2): /注册 事件 mouseout 
else{ /兼容 DOM 事件 模型 
pl.addEventListener("mouseover", f1): / 注册 事件 mouseover 
pl.addEventListener("mouseout", 2): // 注册 事件 mouseout 
- 
</script> 
【拓展 】 | 


JavaScript 事件 用 法 不 是 很 统一 ， 需 要 考虑 DOM 事件 模型 和 正事 件 模型 ， 为 此 需要 编写 
很 多 兼容 性 代码 ， 这 给 用 户 开 发 帝 来 很 多 麻烦 。 为 了 简化 开发 ， 下 面 把 事件 处 理 中 经 稼 使 用 
的 操作 进行 封装， 以 方便 调用 。 谈 者 在 阅读 封装 代码 时 ， 需 要 和 掌握 10.1.9 节 介 绍 的 event 对 象 
知识 。 详 细 代 人 码 请 参考 本 广 示 例 源 代码 ， 或 者 扫 人 码 阅 读 。 


10.1.9 event 对 象 


event 对 象 由 事件 自动 创建 ， 代 表 事 件 的 状态 ， 如 事件 发 生 的 源 节点 ， 键 盘 按 键 的 响应 状态 ， 鼠 标 指针 


的 移动 位 置 ， 鼠 标 按键 的 响应 状态 等 信息 。event 对 象 的 属性 提供 了 有 关 事件 的 细节 ， 其 方法 可 以 控制 事件 
的 传播 。 | 


2 级 DOM Events 规范 定义 了 一 个 标准 的 事件 模型 ， 它 被 除了 正 怪异 模式 以 外 的 所 有 现代 浏览 器 实现 ， 

而 下 定义 了 专用 的 、 不 兼容 的 模型 。 简 单 比较 两 种 事件 模型 | 

回 在 DOM 事件 模型 中 ，event 对 象 被 传递 给 事件 监听 函数 ， 但 是 在 正 事件 模型 中 ， 它 被 存储 在 
window 对 象 的 event 属性 中 。 

回 “在 DOM 事件 模型 中 ，Event 类 型 的 各 种 子 接口 定义 了 额外 的 属性 ， 它 们 提供 了 与 特定 事件 类 型 相 

关 的 细节 ; 在 正 事件 模型 中 ， 只 有 一 种 类 型 的 event 对 象 ， 它 用 于 所 有 类 型 的 事件 。 | 

2 级 DOM 事件 标准 定义 的 event 对 象 属性 如 表 10.1 所 示 。 注 意 ， 这 些 属性 都 是 只 读 属性 。 | 
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表 10.1 DOM 事件 模型 中 的 event 对 象 属性 
属性 说 。” 明 
bubbles 返回 布尔 值 ， 指 示 事件 是 否 是 冒 泡 事件 类 型 。 如 果 事件 是 冒 泡 类 型 ， 则 返回 tue， 和 否则 返回 false 
| 返回 布尔 值 ， 指 示 事 件 是 否 可 以 取消 默认 动作 。 如 果 使 用 preventDefault0 方法 可 以 取消 与 事件 关 


Se 338 | 联 的 默认 动作 ， 则 返回 值 为 rue， 否则 为 false 
二 返回 触发 事件 的 当前 节点 ， 即 当前 处 理 该 事件 的 元 素 、 文 档 或 窗口 。 在 捕获 和 冒 泡 阶 段 ， 该 属性 
| CUITent larget 


是 非常 有 用 的 ， 因 为 在 这 两 个 阶段 ， 它 不 同 于 target 属性 
eventPhase ”| 返回 事件 传播 的 当前 阶段 ， 包 括 捕获 阶段 (1)、 目 标 事件 阶段 (2) 和 冒 泡 阶段 (3 ) 


target 返回 事件 的 目标 节点 (触发 该 事件 的 节点 )， 如 生成 事件 的 元 素 、 文 档 或 窗口 。 
timeStamp 退回 事件 生成 的 日 期 和 时 间 
type 返回 当前 event 对 象 表示 的 事件 的 名 称 ， 如 "submit"、"load" 或 "click" 


2 级 DOM 事件 标准 定义 的 event 对 象 方法 如 表 10.2 所 示 。 正 事件 模型 不 支持 这 些 方法 。 
表 10.2 DOM 事件 模型 中 的 event 对 象 方法 
方 法 说 ”有明 

initEvent() 初始 化 新 创建 的 event 对 象 的 属性 

preventDefault() 通知 浏览 器 不 要 执行 与 事件 关联 的 默认 动作 

NE | 终止 事件 在 传播 过 程 的 捕获 、 目 标 处 理 或 骨 泡 阶段 进一步 传播 。 调 用 该 方法 后 ， 该 节点 上 

ee 处 理 该 事件 的 处 理 函 数 将 被 调用 ， 但 事件 不 再 被 分 派 到 其 他 节点 

僵 ' 提 示 :; 表 10.2 是 Event 类 型 提供 的 基本 属性 ， 各 个 事件 子 模块 也 都 定义 了 专用 属性 和 方法 。 例 
如 ，UIEvent 提供 了 view (发 生 事件 的 window 对 和 他 ) 和 detail ( 事件 的 详细 信息 ) 属性 。 而 
MouseEvent 除了 拥有 Event 和 UIEvent 属性 和 方法 外 ， 也 定义 了 更 多 实用 属性 ， 详 细 说 明 可 参 
考 下 面 章节 内 容 。 


IE 7 及 其 早期 版 本 ， 以 及 正 怪异 模 式 不 支持 标准 的 DOM 事件 模型 ， 并 且 正 的 event 对 象 定义 了 一 组 
完全 不 同 的 属性 ， 如 表 10.3 所 示 。 


表 10.3 IE 事件 模型 中 的 event 对 和 象 属性 


属 性 撒 述 
cancelBubble 如 果 想 在 事件 监听 力 数 中 阻止 事件 传播 到 上 级 包含 对 象 ， 必 须 把 该 属性 设 为 true 
fromElement 对 于 mouseover 和 mouseout 事件 ，fromElement 引用 移出 鼠标 的 元 素 


对 于 keypress 事件 ， 该 属性 声明 了 被 敲 击 的 键 生成 的 Unicode 字符 码 。 对 于 keydown 和 keyup 
事件 ， 它 指定 了 被 散 击 的 键 的 虚拟 键盘 码 。 虚 拟 键盘 码 可 能 和 使 用 的 键盘 的 布局 相关 


offsetX、offsetY ”| 发 生 事件 的 地 点 在 事件 源 元 素 的 坐标 系统 中 的 x 坐标 和 y 坐标 


如 果 设 置 了 该 属性 ， 它 的 值 比 事件 监听 函数 的 返回 值 优先 级 高 。 把 这 个 属性 设置 为 false， 可 
以 取消 发 生 事 件 的 源 元 素 的 默认 动作 


keyCode 


returnValue 
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续 表 
属 性 描 述 
srcElement 对 于 生成 事件 的 window 对 象 、document 对 象 或 element 对 象 的 引用 
toElement 对 于 mouseover 和 mouseout 事件 ,该 属性 引用 移入 鼠 标的 元 素 
X、y 事件 发 生 的 位 置 的 x 坐标 和 y 坐标 ， 它 们 相对 于 用 CSS 定位 的 最 内 层 包含 元 素 


IE 事件 模型 并 没有 为 不 同 的 事件 定义 继承 类 型 ， 因 此 所 有 与 任何 事件 的 类 型 相关 的 属性 都 在 表 103 中 。 ， 


宅 ' 提示 : 为 了 兼容 IE 和 DOM 两 种 事件 模型 ， 可 以 使 用 下 面 表达 式 进行 兼容 。 
var event = event || window.event: /兼容 不 同 模型 的 event 对 象 
上 面 代 码 右 侧 是 一 个 选择 运算 表达 式 ， 如 果 事 件 监听 函数 存在 event 实 参 ， 则 使 用 event 形 
参 来 传递 事件 信息 ， 如 果 不 存在 event 参数 ， 则 调用 window 对 和 象 的 event 属性 来 获取 事件 信息 。 
把 上 面 表达 式 放 在 事件 监听 函数 中 即 可 进行 兼容 。 


在 以 事件 驱动 为 核心 的 设计 模型 中 ， 一 次 只 能 够 处 理 一 个 事件 ， 由 于 从 来 不 会 并 发 两 个 事件 ， 因 此 使 
用 全 局 变量 来 存储 事件 信息 是 一 种 比较 安全 的 方法 。 

【示例 】 演 示 禁 止 超 链接 默认 的 跳 转行 为 。 

<a href="https://www.baidu.com/" id="al1"> 禁止 超 链接 跳 转 </a><script> 

document.getElementByld('al').onclick = function(e) { 


e=e€|| window.event: 1/ 莱 容 事件 对 和 象 
var target = e.target || e.srcElement: 1// 若 容 事 件 日 标 元 素 
if(target.nodeName !—'A'") { / 仅 针对 超 链接 起 作用 
Tetuln: 
} 
if( typeof epreventDefault 一 'function") { // 兼容 DOM 模型 
e.preventDefault(): /禁止 默认 行为 
e.stopPropagation(): /禁止 事件 传播 
} else { /兼容 正 模型 
eTetumValue = false: /禁止 默认 行为 
e.cancelBubble = true: /禁止 冒 泡 
} 
和 | 
</script> | 
【拓展 】 | 


浏览 器 原生 提供 一 个 event 对 象 ， 所 有 的 事件 都 是 这 个 对 象 的 实例 ， 继 承 了 eventprototype 
对 象 。event 对 象 本 身 就 是 一 个 构造 函数 ， 可 以 用 来 生成 新 的 实例 。 有 关 该 接口 的 一 些 参考 信 
息 可 以 扫 码 阅读 。 


10.1.10 ”事件 委托 


事件 委托 ( delegate )， 也 称 为 事件 托管 或 事件 代理 ， 简 单 描述 就 是 把 目标 节点 的 事件 绑 定 到 祖先 节点 | 
上 。 这 种 简单 而 优雅 的 事件 注册 方式 基于 : 事件 传播 过 程 中 ， 逐 层 冒 泡 总 能 被 祖先 节点 捕获 。 
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这 样 做 的 好 处 : 优化 代码 ， 提 升 运行 性 能 ， 真 正 把 HTML 和 JavaScript 分 离 ， 也 能 防止 在 动态 添加 或 删 
除 节点 过 程 中 注册 的 事件 丢失 现象 。 

【示例 1】 使 用 一 般 方法 为 列表 结构 中 每 个 列表 项 目 绑 定 click 事件 ， 单 击 列表 项 目 ， 将 弹出 提示 对 话 
框 ， 提 示 当 前 节点 包含 的 文本 信息 ， 如 图 10.4 所 示 。 但 是 ， 为 列表 框 动态 添加 列表 项 目 之 后 ， 新 添加 的 列 
表 项 目 没有 绑 定 click 事件 。 


<button id="btn"> 添加 列表 项 目 <button> 
<ul 1d="]ist"> 
<li> 列表 项 目 1</1 放 > 
<li> 列表 项 目 2</i> 
<li> 列表 项 目 3</> 
</ul> 
<script> 
Var ul~=document.getElementBylId("list"): 
Var lis—ul.getElementsBylTae Name("11"): 
for(var 1—=0:1<lis.length:1++){ 
lisli|.addEventListener('click',function(e)+{ 
var e = e || window.event; 
var tareet = e.target || e.srcElement: 
alert(e.target.innerHTML):; 
},false); 
} 
var 1 三 牛 
var btn=document.getElementByld("btn"): 
btn.addEventListener("click",function(){ 
var li = document.createElement("]1"); 
liinnerHITML = " 列表 项 目 "+itt+; 
ul.appendChild(]i): 
PE 
</script> 


ee HS rp/ocaho.. ~ BO 
泽 加 列 志 项目 
hh 


- 列表 项 目 1 
* 了 去 项 目 2 


- 列表 项 目 3 
， 旨 志 项 目 4 
= 列表 项 目 5 


图 10.4 动态 添加 的 列表 项 目 事 件 无 效 


【示例 2】 借 助 事件 委托 技巧 ， 利 用 事件 传播 机 制 ， 在 列表 框 ul 元素 上 绑 定 click 事件 ， 当 事件 传播 到 
父 节 点 由 上 时 ,捕获 click 事件 ， 然 后 在 事件 监听 图 数 中 检测 当前 事件 啊 应 节点 类 型 ， 如 果 是 工 元 素 ， 则 进 
一 步 执行 下 面 代 码 ， 和 否则 跳出 事件 监听 图 数 ， 续 束 啊 应 。 
<button id="btn"> 添加 列表 项 目 <button> 
<U] 1d="]ist"> 
<li> 列表 项 目 1</li> 
<li> 列表 项 目 2</li> 
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<li> 列表 项 目 3</i> 
</ul> 
<script> 
var ul=document.getElementByld( "list");: 
ul.addEventListener('click',function(e){ 
var e = € || window.event: 
Var target = e.tarpet || e.srcElement: 
ifetarget&&etargetnodeName.toUpperCase0 一 "LID)1 族 判 断 目标 事件 是 否 为 li*/ 
alert(e.tareet.1nnerHTML): 


},false); 

var 1== 44:; 

var btn=document.getElementBylId("btn"); 

btn.addEventListener("click",function(){ 
var li = document.createElement("]"): 
liinnerHTML =" 列表 项 目 " + 计 +:; 


ul.appendChild(1); 

让 

</script> 

当 页 面 存 在 大 量 元 素 ， 并 且 每 个 元 素 注 册 了 一 个 或 多 个 事件 时 ， 可 能 会 影响 性 能 。 访 问 和 修改 更 多 的 DOM 
节点 ， 程 序 就 会 更 慢 ， 特 别 是 事件 连接 过 程 都 发 生 在 load ( 或 DOMContentReady ) 事件 中 时 ， 对 任何 一 个 宦 交 
互 网 页 来 说 ， 这 都 是 一 个 繁忙 的 时 间 段 。 另 外 ， 浏 览 器 需要 保存 每 个 事件 句柄 的 记录 ， 也 会 占用 更 多 内 存 。 

【拓展 】 口 Fe 

DOM 2 事件 规范 允许 用 户 模拟 特定 事件 ，IE 9、Opera、Firefox、Chrome 和 Safari 浏览 器 和 5 


均 文 持 , 正 浏 览 硕 还 有 自己 模拟 事件 的 方式 。 详 细 操作 步 又 和 说 明 请 扫 但 阅读 。 


10.2 jQuery 实现 


jQuery 在 JavaScript 基 础 上 进一步 封装 了 不 同类 型 的 事件 模型 ， 从 而 形成 一 种 功能 更 强大 、 
用 法 更 优雅 的 “jQuery 事件 模型 ”。jQuery 事件 模型 的 特征 如 下 : 

回 统一 了 事件 处 理 中 的 各 种 方法 。 

MM 人 允许 在 每 个 元 素 上 为 每 个 事件 类 型 建立 多 个 处 理 程序 。 

加 ”采用 DOM 事件 模型 中 标准 的 事件 类 型 名 称 。 

名 ”统一 了 event 事件 对 象 的 传递 方法 ， 并 对 event 对 象 的 常用 属性 和 方法 进行 规范 。 

”为 事件 管理 和 操作 提供 统一 的 方法 。 

考虑 到 正 浏览 带 不 支持 事件 流 中 的 捕获 型 阶段 ， 且 开发 者 很 少 使 用 捕获 阶段 ，jQuery 事件 模型 也 没有 
支持 事件 流 中 的 捕获 型 阶段 。 除 了 这 一 点 区 别 外 ，jQuery 事件 模型 的 功能 与 DOM 事件 模型 基本 相似 。 


10.2.1 绑 定 事件 


jQuery 提供 了 四 种 事件 绑 定 方式 : bmnd0 、liveO0 、delegate0 和 on0。 每 种 方式 各 有 其 特点 ， 明 白 了 它们 
之 间 的 异同 点 ， 能 够 进行 正确 的 选择 ， 从 而 写 出 优雅 而 容易 维护 的 代码 。 
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1. bind() 
bind0 为 匹配 元 素 添 加 一 个 或 多 个 事件 处 理 占 。 用 法 如 下 : 
bind(event,data,function) 


加”event: 必需 参数 项 ， 添 加 到 元 素 的 一 个 或 多 个 事件 ， 如 click、dblclick 等 。 
> 可 以 单 事 件 人 处理， 如 “$(selector).bind("click",data,function):;”。 
> 可 以 设计 多 事件 处 理 ， 此 时 需要 使 用 空格 分 隅 多 个 事件 ， 如 “S$(selector).bind("click dbclick 
mouseout",data,function);”， 这 种 方式 较为 死板 ， 不 能 给 事件 单独 绑 定 函数 ， 适合 处 理 多 个 事件 
调用 同一 因数 的 情况 。 
> 可 以 使 用 大 括号 语法 灵活 定义 多 个 事件 ， 如 “$(selector).bind( {event] :fumction, event2:function, ..….})”， 
这 种 方式 较为 灵活 ， 可 以 给 事件 单独 绑 定 函数 。 
加 ”data: 可 选 参数 项 ， 设 计 需 要 传递 的 参数 。 
加 fonction: 必需 参数 项 ， 当 绑 定 事件 发 生 时 ， 震 要 执行 的 困 数 。 


语 提示 : bind0 方法 适用 所 有 版 本 ， 但 是 根据 官网 解释 ， 自 从 jQuery 1.7 版 本 以 后 ， 推 荐 使 用 on0 方法 
代替 bind0 方法 。 


【示例 1】 使 用 bind0 方法 为 按钮 绑 定 事件 。 


<ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"= 

<script src="]Jquery/Jquery-3.1.1.]s" type="text/Javascript"></script> 
<script type="text/Javascript" > 


$(function O { 

上 * 添加 单个 事件 处 理 */ 

$(".btn-test").bind("click", function () { 
$(".container").slideTogele(): /显示 隐藏 div 

}); 

片 添 加 多 个 事件 处 理 */ 

$(".btn-test").bind("mouseout click", function O {// 空格 相 隅 方式 
$(".container").slideTogegle(): // 显示 隐藏 div 

})); 

$(".btn-test").bind( { /大 括号 替代 方式 


"mouseout": fanction | { 
alert(" 这 是 mouseout 事件 1"): 
. 
"click": function OO { 
$(".container").slideTogegle(): 
4 


1); 
上 删除 事件 处 理 */ 
$(".btn-test").Unblnd("cllcKk”): 
}); 
</script> 


i 
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<body> 
<input type="button" value=" 按钮 " class="btn-test" 放 > 
<dv class="container"><1me src="1mages/1.]pg" height="200" /></dIv> 


</html> 

2. live() 

live0 为 当前 或 未 来 的 匹配 元 素 添加 一 个 或 多 个 事件 处 理 程序 。 用 法 如 下 : 

live(event.data,function) | 

参数 说 明 如 下 ， | 

加 ”event: 必需 参数 项 ， 添 加 到 元 素 的 一 个 或 多 个 事件 ， 如 click、dblclick 等 ， 详 细 说 明 可 参考 bind0) | 
方法 。 / 


四 data: 可 选 参数 项 ， 设 计 需 要 传递 的 参数 。 
加 fonction: 必需 参数 项 ， 当 绑 定 事件 发 生 时 需要 执行 的 图 数 。 | 


崔 提示 : jQuery 1.9 版 本 以 下 支持 live( 方法 ，jQuery 1.9 及 其 以 上 版 本 删除 了 该 方法 ，jQuery 1.9 以 上 版 | 
本 用 on0 方法 来 代替 。 


3. delegate() | 
delegate0 为 指定 的 元 素 和 被 选 元 素 的 子 元 素 添 加 一 个 或 多 个 事件 处 理 程序 ， 并 规定 当 这 些 事件 发 生 时 | 

运行 的 限 数 。 使 用 delegate0 方法 适用 于 当前 或 未 来 的 元 素 ， 如 由 脚本 创建 的 新 元 条 等 。 用 法 如 下 : 
delegate(chlljdselectoreventdata.functlon) 


思 childSelector: 必需 参数 项 ， 指 定 需要 注册 事件 的 元 素 ， 一 般 为 调用 对 象 的 子 元素 。 | 

回 event: 必需 参数 项 ， 添 加 到 元 素 的 一 个 或 多 个 事件 ， 如 click、dblclick 等 ， 详 细 说 明 可 参考 bindO 
pi 

加 data: 可 选 参数 项 ， 设 计 需 要 传递 的 参数 。 

回 fnction: 必需 参数 项 ， 当 绑 定 事件 发 生 时 需要 执行 的 图 数 。 


党 提示 : delegate0 方法 适用 于 jQuery 1.4.2 及 其 以 上 版 本 。 


【示例 2】 设 计 一 个 项 目 列表 ， 当 单 击 按钮 时 ， 可 以 动态 添加 列表 项 目 ， 使 用 delegate0 方法 为 每 个 <li> 
标签 绑 定 click 事件 ， 单 击 时 将 弹出 该 列表 项 目 包含 的 文本 。 在 浏览 器 中 预览 ， 当 单 击 按 钮 为 列表 框 动态 添 ” 
加 列表 项 目 时 ， 会 发 现 新 添加 的 列表 项 目 也 拥有 click 事件 ， 如 图 10.5 所 示 。 | 

<script type=—"text/Javascript" > | 

$(function O { 
$("ul").delegate("l","click",functionO { 
alert(this.innerHTML): 
}): 
var1= 4: 
$("#btn").click(functionO { 
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$("ul").append("<li> 列表 项 目 "+ i++ "cjli>m) 
a 
})): 
</script> 


<button 1d="btn"> 添加 列表 项 目 </button> 


<ul id="list"> 

<]i> 列表 项 目 1</i> 

<]i> 列表 项 目 2<i> 

< 列表 项 目 3</i> 
</ul> 

Se . 
滩 加 列表 项 目 
* 别 表 项 目 1 
人 A 人 列表 项 目 5 
确定 | 

4. on() 


on() 为 指 定 的 元 率 添加 一 个 DY 胆 诺 
法 的 事件 处 理 程序 适用 于 当前 或 未 来 的 元 素 ， 如 由 脚本 创建 的 新 元 素 。 用 法 如 下 : 


on(event.childSelector.data,function) 


运行 的 晒 数 。 使 用 on() 方 


回 event: 必需 参数 项 ， 添 加 到 元 素 的 一 个 或 多 个 事件 ， 如 click、dblclick 等 ， 话 细 说 明 可 参考 bind0 
方法 。 


回 ”childselector: 可 选 参 数 项 ， 指 定 需要 注册 事件 的 元 素 ， 一 般 为 调用 对 象 的 子 元 素 。 
: 可 选 参数 项 ， 设 计 需 要 传递 的 参数 。 
回 “function: 必需 参数 项 ， 当 绑 定 事件 发 生 时 需要 执行 的 函数 。 


从 提示 : on0 方法 适用 于 jQuery 1.7 及 其 以 上 版 本 ，jQuery 1.7 版 本 出 现 之 后 用 于 替代 bind()、live() 绑 定 
事件 方式 。 


【示例 3】 针 对 示例 2， 
$(function OQ { 
$("u1").on("click","li",function() { 
alert(this.innerHTML): 


可 以 使 用 on0 方法 代替 delegate0 方法 。 


$("#btn").click(function() 1 
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$("u1").append("<li> 列表 项 目 "+it++"</i>") 
1) 
【示例 4】 向 事件 处 理 函 数 传递 数据 。 本 例 计划 传 递 A 和 B 两 个 值 ， 先 使 用 对 象 结 构 对 其 进行 封装 ， 然 
后 作为 参数 传递 给 on0 方法 。 在 事件 处 理沙 数 中 可 以 通过 event 对 象 的 data 属性 来 访问 这 个 对 象 ， 进 而 访 
问 该 对 象 内 包含 的 数据 ， 演 示 效 坟 如 图 10.6 所 示 。 ] 
<scrlpt type="text/Javascript" > | 
$(function O) { 
$C"n").on("clhck","h", {a:"A",b:"B"},function(event){ 
$(this).text(event.data.a + event.data.b): 


小 
和 
</script> 


<U] 1d—"]ist"> 
<]i> 列表 项 目 1</i> 
<]i> 列表 项 目 2</1li> 
<li> 列表 项 目 3</i> 
</Uul> 


+] 二 http:j/localho.. = 昌 此 | 是 localhost 


s BB 
s。 列表 项 目 2 
s 点 六 


图 10.6 在 on0 方法 中 传递 数据 | 


在 上 面 代码 中 ， 如 果 既 想 取消 元 素 特定 事件 类 型 的 默认 行为 ， 又 想 阻 止 事件 冒 泡 ， 只 要 设置 事件 处 理 
限 数 返回 值 为 false 即 可 。 | 
$("u0l").on("click", {a:"A".b:"B"t,function(event)1 
$(this).text(event.data.a + event.data.b); 
return false: 


pi 


使 用 preventDefaultO 方法 可 以 只 取消 默认 的 行为 。 


$C"ul").on("clck", {a:"A".b:"B"},function(event)! 
$(this).text(event.data.a + event.data.b): 
event.preventDetault( ): 


1 


使 用 stopPropagation0 方法 可 以 只 阻止 一 个 事件 冒 泡 。 


$("0l").on("click", {a:"A".b:"B"},function(event){ 
$(this).text(event.data.a + event.data.b); 
event.stopPropagation(); 

bE 
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【拓展 】 

比较 四 种 事件 绑 定 方式 的 异同 。 

町 ”相同 点 

第 1 点 ， 都 支持 单元 素 多 事件 的 绑 定 ， 都 文 持 空 格 相隔 方式 或 者 大 括号 蔡 代 方式 。 

第 2 点 ， 均 是 通过 事件 冒 泡 方式 ， 将 事件 传递 到 document 进行 事件 的 啊 应 。 

町 不 同 点 

第 1 点 ，bind0 方法 只 能 针对 已 经 存在 的 元 素 进 行事 件 的 设置 ; 但 是 live0、on0 、delegate0) 方法 均 支 持 
委派 事件 ， 即 可 以 为 未 来 新 添加 元 素 注册 事件 。 

第 2 点 ，bind0 方法 在 jQuery 1.7 版 本 以 前 比较 受 推 尝 ，1.7 版 本 出 来 之 后 ， 官方 已 经 不 推荐 用 bind0 
方法 ， 替 代 方 法 为 on0。ong0 方法 可 以 代替 live0 方法 ，live0 方法 在 1.9 版 本 已 经 删除 。 

第 3 点 ，live0 方法 与 delegate0 方法 类 似 ， 但 是 live0 方法 在 执行 速度 、 灵 活性 和 CSS 选择 冀 文 持 方 
面 不 如 delegate0 方法 。 

第 4 点 ，bind0 方法 支持 jQuery 版 本 1 和 jQuery 版 本 2， 在 jQuery 版 本 3 中 被 弃 用 ; live0 方法 支持 
jQuery 1.8-， 噩 版 本 不 再 支持 ; delegate() 方法 支持 jQuery 1.4.2+， 在 jQuery 版 本 3 中 被 弃 用 ; on0 方法 支持 
J]Query 1.7+。 

总 之 ， 如 果 项 目 中 引用 jQuery 为 低 版 本 ， 推 荐 用 delegate0 方法 ， 高 版 本 jQuery 可 以 使 用 on0 方法 来 
代替 ,在 jQuery 3+ 版 本 中 只 支持 on0 方法 。 


10.2.2 事件 方法 


除了 事件 绑 定 专用 方法 外 ，jQuery 还 定义 了 24 个 快捷 方法 为 特定 的 事件 类 型 绑 定 事件 处 理 程序 ， 这 些 
方法 与 2 级 事件 模型 中 的 事件 类 型 一 一 对 应 ， 名 称 完 全 相同 ， 如 表 10.4 所 示 。 


表 10.4 绑 定 特定 事件 类 型 的 方法 


ET ed 
ranged scroll 
hic wm 
ao mioad0 


【示例 】 对 于 下 面 使 用 bind0 方法 绑 定 的 事件 。 
$("p").bind("click",function(){ 

alert($(this).textO): 
让: 
可 以 直接 使 用 click0 方法 绑 定 。 
$("p").click(function() { 

alert($(this).text()): 
DE 


< 匀 注意 : 当 使 用 这 些 快捷 方法 时 ， 无 法 向 event.data 属性 传递 额外 的 数据 。 如 果 不 为 这 些 方法 传递 事件 
处 理 函 数 而 直接 调用 它们 ， 则 会 触发 已 绑 定 这 些 对 象 上 的 对 应 事件 ， 和 包括 默认 的 动作 。 
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one0 方法 是 on0 方法 的 一 个 特例 ， 用 法 与 bind0 方法 完全 相同 ， 但 由 它 绑 定 的 事件 在 执行 一 次 啊 应 之 


后 就 会 失效 。 用 法 如 下 : 
oneltype,|data|,functlony) 


回 type: 必需 参数 项 ， 添 加 到 元 素 的 一 个 或 多 个 事件 ， 如 click、dblclick 等 ， 详 细 说 明 可 参考 bind0 


方法 。 


加 data: 可 选 参 数 项 ， 设 计 和 需要 传递 的 参数 。 
加 fnction: 必需 参数 项 ， 当 绑 定 事件 发 生 时 需要 执行 的 图 数 。 


【示例 】 使 用 one0 方法 绑 定 click 事件 ， 它 只 能 啊 应 一 次 ， 当 第 二 次 单 击 列表 项 目 时 就 不 再 响应 。 


<script type="text/Javascript" > 
$(function() { 
$("0>1i").one("click",functionO{ 
alert($(this).text()); 
I 
月 
</script> 


<UL 1d="]ist"> 


<li> 空山 新 十 后 ， 天 气 晚 来 秋 。</l 放 

<li> 明月 松 间 照 ， 清 果 石 上 流 。</li> 

<li> 竹 喧 归 浣 女 ， 莲 动 下 渔 丹 。</> 

<]i> 随意 春芳 吹 ， 王 孙 自 可 留 。</1l> 
<fub> 


口 台 忆 


one( 方法 的 设计 思路 : 在 事件 人 处理 陋 数 内 部 注销 当前 事件 。 


10.2.4 ”注销 事件 


交互 型 事件 的 生命 周期 往往 与 页 面 的 生命 周期 是 相同 的 , 但 是 很 多 交互 事件 只 有 在 特定 的 时 间或 者 
件 下 有 效 ， 超过 了 时 效 期 就 应 该 把 它 注销 掉 ， 以 节省 系统 空间 。 


条 


下 


jQuery 提供 了 四 种 事件 绑 定 方式 : bind0 、live0、delegate0 和 on0。 对 应 的 注销 事件 方式 : unbind0、 


die()、undelegate() 和 off()。 


注销 方法 与 注册 方法 是 相反 的 操作 ， 参 数 和 用 法 基本 相同 。 它 们 能 够 从 每 个 匹配 的 元 素 中 删除 绑 定 的 


事件 。 如 后 没 有 指定 参数 ， 则 删除 所 有 绑 定 的 事件 ， 包 括 注册 的 目 定 义 事件 。 


【示例 1】 分 别 为 p 元 素 绑 定 click、mouseover、mouseout 和 dblclick 事件 类 型 。 在 dblclick 事件 类 型 的 


<script type="text/Javascript" > 
$(functionO { 
$("p").dblclick(functionO{ 


/注册 双击 事件 
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事件 处 理 也 数 中 调用 offtI。 这 样 在 没有 双击 段落 文本 之 前 ， 鼠 标的 移 过 、 移 出 和 单 击 和 都 会 触发 啊 应 ， 一 且 
双击 段落 文本 ， 则 所 有 类 型 的 事件 都 被 注销 ， 鼠 标的 移 过 、 移 出 和 单 击 动作 就 不 再 啊 应 。 


$("p").offO: / 注销 所 有 事件 
1); 
$("p").click(f): / 注册 单 击 事件 
$("p").mouseover(f): // 注册 鼠标 移 过 事件 
$("p").mouseout(f): // 注册 鼠标 移出 事件 
function f(event) { /事件 处 理 郑 数 
this.innerHTMIL= "事件 类 型 = " + eventtype: 
} 
入 
</script> 
<p> 百 变 文本 </p> 


如 果 提 供 了 事件 类 型 作为 参数 ， 则 只 删除 该 类 型 的 绑 定 事件 。 

【示例 2】 下 面 代码 将 只 注销 mouseover 事件 类 型 ， 而 其 他 类 型 的 事件 依然 有 效 。 

$("p").dblclick(functionO{ 

$("p").off("mouseover"); 

}); 

如 果 将 绑 定 时 传递 的 处 理 函 数 作为 第 二 个 参数 ， 则 只 有 这 个 特定 的 事件 处 理 函 数 会 被 删除 。 

【示例 3】 分 别 为 p 元 素 注 册 鼠 标 指 针 经 过 事件 ， 并 绑 定 两 个 事件 处 理 消 数 ， 这 样 当 鼠标 指针 经 过 段落 
文本 时 ,会 分 别 调用 这 两 个 事件 处 理 清 数 。 当 单 击 段落 文本 时 ， 将 移出 其 中 一 个 事件 处 理 哺 数 ; 当 再 次 移 过 
段落 文本 时 ， 将 只 有 一 个 事件 处 理 困 数 被 调用 。 


<ScIlpt type="text/Javascript" > 


$(function() { 
$("p").click(functionO) + /注册 单 击 事件 
$("p").off("mouseover", e): / 注销 鼠标 经 过 事件 中 e0 事件 处 理 函 数 
De 
$("p").mouseover(f): /注册 鼠标 经 过 事件 ， 绑 定 如 事件 处 理 函 数 
$("p").mouseover(e): /注册 鼠标 经 过 事件 ， 绑 定 e0 事件 处 理 函 数 
functon f(){ 
$(this).text(" 第 一 个 单 击 事件 ") 
} 
function eO{ 
$(this).text(" 第 二 个 单 击 事件 ") 
} 
}) 
</script> 
<p> 百 变 文本 </p> 


10.2.5 ”使 用 事件 对 和 象 
在 使 用 on0 、bindo 、delegate0 等 方法 注册 事件 时 ，event 对 象 实例 将 作为 第 一 个 参数 传递 给 事件 处 理 


图 数 ， 这 与 DOM 事件 模型 是 完全 相同 的 , 但 是 jQuery 统一 了 正 事件 模型 和 DOM 事件 模型 中 event 对 象 
属性 和 方法 的 用 法 ， 使 其 完全 符合 DOM 标准 事件 模型 的 规范 。 
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jQuery 修正 了 Web 开发 中 可 能 遇 到 的 浏 览 融 兼容 性 问题 ， 表 10.5 所 示 为 jQuery 的 event 对 象 可 以 完全 | 
使 用 的 属性 和 方法 。 | 
表 10.5 jQuery 安全 的 Event 对 象 属性 和 方法 
属性 / 方法 说 明 
获取 事件 的 类 型 ， 如 click、mouseover 等 。 返 回 值 为 事件 类 型 的 名 称 ， 该 名 称 与 注册 事件 处 理 加 
人 数 时 使 用 的 名 称 相同 
target 发 生 事件 的 节点 。 一 般 利用 该 属性 来 获取 当前 被 激活 事件 的 具体 对 象 


引用 与 事件 的 目标 节点 相关 的 节点 。 对 于 mouseover 事件 来 说 ， 它 是 鼠标 指针 移 到 目标 上 时 所 离 
开 的 那个 节点 ; 对 于 mouseout 事件 来 说 ， 它 是 离开 目标 时 鼠标 指针 将 要 进入 的 那个 节点 


altKey 表示 在 声明 鼠标 事件 时 ， 是 否 按 下 了 Alt 键 。 如 果 返 回 值 为 tue， 则 表示 按 下 
ctrlIKey 表示 在 声明 鼠标 事件 时 ， 是 否 按 下 了 Ctrl 键 。 如 果 返 回 值 为 tue， 则 表示 按 下 
shiftKey 表示 在 声明 鼠标 事件 时 ， 是 否 按 下 了 Shift 键 。 如 果 返 回 值 为 tue， 则 表示 按 下 
metaKey 表示 在 声明 鼠标 事件 时 ， 是 否 按 下 了 Meta 键 。 如 果 返 回 值 为 tue， 则 表示 按 下 


当 在 声明 mousedown 、mouseup 和 click 事件 时 ， 显 示 鼠 标 键 的 状态 值 。 也 就 是 说 ， 哪 个 鼠标 键 改 
变 了 状态 。 返 回 值 为 1， 表 示 按 下 左 键 ; 返回 值 为 2， 表 示 按 下 中 键 ; 返回 值 为 3， 表 示 按 下 右键 


which 在 声明 keydown 和 keypress 事件 时 ， 显 示 触 发 事件 的 键盘 键 的 数字 编码 
pageX 对 于 鼠标 事件 来 说 ,指定 鼠标 指针 相对 于 页 面 原点 的 水 平 坐标 

pageY 对 于 鼠标 事件 来 说 ， 指 定 鼠 标 指针 相对 于 页 面 原点 的 垂直 坐标 

screenX 对 于 鼠标 事件 来 说 ， 指 定 鼠 标 指针 相对 于 屏幕 厚 点 的 水 平 坐 标 
screenY 对 于 鼠标 事件 来 说 ， 指 定 鼠 标 指针 相对 于 屏幕 厚 点 的 垂直 坐标 

data 存储 事件 处 理 函 数 第 二 个 参数 所 传递 的 额外 数据 

preventDefaultO | 取消 可 能 引起 任何 语义 操作 的 事件 ， 如 元 素 特定 事件 类 型 的 默认 动作 
stopPropagation() | 防止 事件 沿 着 DOM 树 向 上 传播 


relatedTarget 


which 


10.2.6 ”触发 事件 


事件 都 是 在 特定 条 件 下 发 生 的 ， 自 然 不 同类 型 的 事件 触发 的 时 机 是 无 法 预测 的 。 开 发 者 无 法 知道 用 户 何 
时 单 击 按钮 提交 表单 ， 或 者 何 时 输入 文本 。 但 是 在 很 多 情况 下 ,开发 人 员 需 要 在 脚本 中 控制 事件 触发 的 时 机 。 
例如 ,设计 一 个 弹出 广告 ,虽然 广告 画面 提供 了 允许 用 户 关闭 广告 的 按钮 ， 但 是 我 们 也 应 该 设计 一 个 
条 件 ， 控 制 广告 在 显示 3 秒 钟 之 后 自动 关闭 。 | 
也 许 用 户 可 以 把 事件 处 理 函 数 定义 为 独立 的 窗口 函数 ， 以 便于 直接 通过 名 称 调用 它 ， 而 不 需要 特定 的 
事件 交互 。 但 是 如 果 人 允许 直接 调用 事件 的 处 理 函 数 ， 会 简化 程序 的 设计 ， 更 为 重要 的 是 它 方便 操作 。 | 
在 传统 表单 设计 中 ， 表 单 域 元 素 都 拥有 focus0 方法 和 blur0 方法 ， 调 用 它们 将 会 直接 调用 对 应 的 focus | 
和 blur 事件 处 理 函 数 ， 使 文本 域 获取 焦点 或 者 失去 焦点 。 | 
jQuery 定义 在 脚本 控制 下 自动 触发 事件 处 理 函 数 的 一 系列 方法 ， 其 中 最 常用 的 是 trigger0 方法 。 用 法 如 下 : 


trigger(type. [datal) 
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其 中 参数 type 表示 事件 类 型 ， 以 字符 串 形 式 传递 ; data 是 可 选 参数 ， 利 用 该 参数 可 以 向 调用 的 事件 处 
理 限 数 传 递 额外 的 数据 。 
【示例 1】 本 应 该 在 用 户 单 击 时 才能 触发 的 事件 人 处理 程序 ， 现 在 利用 trigger0 方法 ， 定 义 在 鼠标 指针 移 
过 事件 处 理 函 数 中 ， 从 而 当 鼠 标 指针 移 过 段落 文本 时 会 日 动 触 发 鼠标 单 击 事件 。 
<scrIpt type="text/Javascript" > 
$(function(){ 
$("11").click(functionO { 
alert($(this).textO): 
}): 
$("11").mouseover(function(O{ 
$(this).trigger("click"): // 调用 trigger0 方法 直接 触发 click 事件 
1); 
}) 
</script> 
<style type="text/css"> 
</style> 


<U] 1d="]st"> 
<li> 空山 新 十 后 ， 天 气 晚 来 秋 。</li> 
<li> 明月 松 间 照 ， 清 泉 石 上 流 。</> 
<li> 竹 喧 归 尝 女 ， 莲 动 下 渔舟 。</li> 
<]i> 随意 春芳 歇 ， 王孙 自 可 留 。</li> 
</ul> 
trigger0 方法 也 会 触发 同名 的 浏览 咒 默 认 行 为 。 例 如 ， 如 条 用 trigger0 方法 触发 一 个 submit 事件 类 型 ， 
则 同样 会 导致 浏 览 器 提交 表单 。 如 果 要 阻止 这 种 默认 行为 ， 则 可 以 在 事件 处 理 师 数 中 设置 返回 值 为 false。 
所 有 触发 的 事件 都 会 冒 泡 到 DOM 树 顶 。 例 如 ， 如 果 在 芷 元 素 上 触发 一 个 事件 ， 它 首先 会 在 这 个 元 素 
上 触发 ， 然后 向 上 冒 泡 ， 直 到 触发 document 对 象 。 通 过 event 对 象 的 target 属性 可 以 找到 最 开始 触发 这 个 
事件 的 元 素 。 用 户 可 以 用 stopPropagation0 方法 来 阻止 事件 骨 泡 ， 或 者 在 事件 处 理 闵 数 中 返回 false。 
triggerHandler0 方法 对 trigger0 方法 进行 补充 ， 该 方法 的 行为 表现 与 trigger0 方法 类 似 ， 用 法 也 相同 ， 
但 是 存在 以 下 3 个 主要 区 别 。 
回 triggerHandler0 方法 不 会 触发 浏览 右 默 认 事 件 。 
名 ”triggerHandler( 方法 只 触发 jQuery 对 象 集 合 中 第 一 个 元 素 的 事件 处 理 明 数 。 
加 triggerHandler0 方法 返回 的 是 事件 处 理 函 数 的 返回 值 ， 而 不 是 jQuery 对 象 。 如 果 最 开始 的 jQuery 
对 象 集合 为 空 ， 则 这 个 方法 返回 undefined。 
除了 trigger0 方法 和 triggerHandler0 方法 外 ，jQuery 还 为 大 部 分 事件 类 型 提供 了 快捷 触发 的 方法 ， 如 
表 10.6 所 示 。 


表 10.6 jQuery 定义 的 快捷 触发 事件 的 方法 


blur() dblclick() keydown() select() 
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这 些 方法 没有 参数 ， 直 接 引 用 能 够 目 动 触发 引用 元 素 绑 定 的 对 应 事件 处 理 程序 。 
【示例 2】 针 对 示例 1， 也 可 以 直接 使 用 click0 方法 替代 trigger("click") 方法 。 


$(function(O{ 
$("11").click(function(){ 
alert($(this).text()): 
)): 
$("11").mouseover(function(){ 
$(this).clickO): /调用 click0 方法 直接 触发 click 事件 
}): 
1) 


10.2.7 切换 事件 


jQuery 定义 了 两 个 事件 切换 的 合成 方法 : hover0 和 toggle0。 事 件 切换 在 Web 开发 中 经 常会 用 到 ， 如 样 
式 交 互 、 行 为 交互 等 。 
另外 ，jQuery 定义 了 一 个 toggleClass0 方法 ， 它 能 够 显示 / 隐藏 指定 的 类 样式 ， 实 现 样 式 动 态 切 换 ， 而 
hover0 方法 和 toggle0 方法 能 够 实现 行为 交互 。toggle0 方法 用 于 绑 定 两 个 或 多 个 事件 处 理 天 图 数 ， 以 啊 应 
被 选 元 素 的 轮流 的 click 事件 。 
从 jQuery 1.9 版 本 开始 ，jQuery 删除 toggle(function, function, …) 用 法 ， 仅 作为 元 素 显 隐 切 换 的 交互 事 


和 


如 果 元 素 是 可 见 的 ， 切 换 为 隐藏 的 ; 如 果 元 素 是 隐藏 的 ， 切 换 为 可 见 的 。 具 体 用 法 如 下 : 
toggle([speed|.[easing|.[fn]) 


回 “speed: 可 选 参 数 ， 表 示 隐 藏 / 显示 效果 的 速度 ， 默 认为 0 毫秒 ， 可 选 值 为 "slow" "normal" "fast" 等 。 


回 easing: 可 选 参数 ， 用 来 指定 切换 效果 ， 默 认为 "swing"， 可 用 参数 为 "linear"。 
回血 : 可 选 参数 ， 定 义 在 动画 完成 时 执行 的 图 数 ， 每 个 元 素 执行 一 次 。 
【示例 】 使 用 按钮 动态 控制 列表 框 的 显示 或 隐藏 。 


<script type="text/Javascript" > 
$(function(){ 
$("button").click(function() { 
$("ul#list").toggle("slow"): 
1): 
}) 
</script> 


<button> 控制 按钮 </button>= 

<Ul 1d="]ist"> 
<li> 空山 新 十 后， 天 气 晚 来 秋 。</li> 
<li> 明月 松 间 照 ， 清 果 石 上 流 。</l> 
<li> 竹 喧 归 尝 女 ， 莲 动 下 渔舟 。</li> 
<li> 随意 春芳 歇 ， 王孙 自 可 留 。</li> 

</Uul> 


也 可 以 直接 为 toggle0 方法 传递 tue 或 false 参数 ， 用 于 确定 显示 或 隐藏 元 素 。 例 如 


. 301 。 


， 下 面 代码 定义 单 


zeny 以 入 门 到 精通 ( 币 课 精 编 县 ) 


击 按钮 时 将 隐藏 段落 文本 。 
$(function(){ 
$("button").click(function() { 
$("ul#list").togele(false): 
入: 
}) 


10.2.8 使 用 悬 停 事件 


hover( 方法 可 以 模仿 悬 停 事件 ， 即 鼠标 指针 移动 到 一 个 对 象 上 面 及 移出 这 个 对 象 的 方法 。 这 是 一 个 目 
定义 的 方法 ， 它 为 频 蚂 使 用 的 任务 提供 了 一 种 保持 在 其 中 的 状态 。 
hover0 方法 包含 两 个 参数 ， 其 中 第 一 个 参数 表示 鼠标 指针 移 到 元 素 上 要 触发 的 图 数 ， 第 二 个 参数 表示 
鼠标 指针 移出 元 素 要 触发 的 图 数 。 
【示例 1】 为 按钮 绑 定 hover 合成 事件 ， 这 样 当 鼠标 指针 移 过 按钮 时 会 触发 指定 的 第 一 个 图 数 ， 当 鼠标 
指针 移出 这 个 元 素 时 会 触发 指定 的 第 二 个 函数 。 
<script type="text/Javascript" > 
$(fimction() { 
$("input").hover( 
function(){ 
this.value =" 鼠标 经 过 ": 
ction(){ 
this.value =" 鼠标 已 移出 "; 
}) 


}) 
</script> 


<input type="button" value=" 鼠标 切换 事件 " > 


mouseout 事件 存在 一 个 很 严重 的 错误 : 如 果 鼠 标 指 针 移 到 当前 元 素 包 含 的 子 元 素 上 ， 将 会 触发 当前 元 
素 的 mouseout 和 mouseover 事件 。 这 种 错误 性 解释 严重 影响 开发 人 员 设计 各 类 悬 停 处 理 程序 ， 如 导航 沫 单 。 
【示例 2】 为 div 元 素 绑 定 mouseover 和 mouseout 事件 处 理 程序 ， 当 鼠标 指针 进入 div 元 率 时 将 会 触 
发 mouseover 事件 ， 而 当 鼠 标 指针 移 到 span 元 素 上 时 ,虽然 鼠标 指针 并 没有 离开 div 元 素 ， 但 是 将 会 触发 
mouseout 和 mouseover 事件 。 如 果 鼠 标 指针 在 div 元 素 内 部 移动 ， 就 可 能 会 不 断 触 发 mouseout 和 mouseover 
事件 ， 产 生 不 断 闪 烁 的 事件 触发 现象 ， 演 示 效 果 如 图 10.7 所 示 。 
<script type="text/Javascript" > 
window.onload = function(){ 
var div = document.getElementsByTaeName("d1v")|0|; 
varp = document.getElementsByTaeName("p")[0|: 
var span = document.getElementsByTaeName("span")[0l: 
if(div.addEventListener){ /兼容 非 正 浏览 器 
div.addEventListener("mouseover",over,false); /注册 mouseover 事件 
div.addEventListener("mouseout",out,false): 1// 注册 mouseout 事件 
jelset /兼容 正 浏览 器 


* 302°* 


第 10 章 JQuery 事件 


div.attachEvent("onmouseover",over): / 注册 mouseover 事件 
div.attachEvent("onmouseout",out): // 注册 mouseout 事件 
} 
function over(event){ /事件 处 理 函 数 
var event = event || window.event: // 若 容 event 对 象 
p.innerHTML += event.type + "<br />"; 
} 
function out(event){ /事件 处 理 闵 数 
Var event = event | window.event: 1/ 若 容 event 对 象 
p.innerHTML += event.type + "<br />"; 
} 
上 
</script> 
<style type="text/css"> 


div {Wwidth:300px: height: ] 80px:; backeround:red: paddine:20px:1 
span {loat:right; width:120px: helght:80px:; backeround:blue: color:white: tont-welght:bold:: 
</style> 


<span></span> 
</div> 
<p></P 


由 于 on0 、bindO 、mouseoverO 和 mouseout0 等 方法 都 是 直接 在 原 事 件 基础 上 进行 包装 的 ， 因 此 使 用 
jQuery 的 on0、bind0 、mouseover0 和 mouseout0 方法 绑 定 时 也 会 存在 上 述 问 题 。 而 hover0 方法 修正 了 这 
个 错误 ， 它 会 对 鼠标 指针 是 否 仍 然 处 在 特定 元 素 中 进行 检测 ， 如 果 是 ， 则 会 继续 保持 悬 停 状 态 ， 而 不 触发 
移出 事件 。 

【示例 3】 针 对 示例 2， 使 用 hover0 方法 实现 相同 的 设计 效果 ， 当 鼠标 指针 进入 div 元 素 ， 并 在 div 元 
素 内 部 移动 时 ， 只 会 触发 一 次 mouseover 事件 ,演示 效果 如 图 10.8 所 示 。 


焉 


二 Ehtp//ocalho.. » Bo EE +) http//ocalho.. ~ Bo 


OUSeoVver Ouseenter 
ouUseout 
MOUSeEOWVer 


图 10.7 mouseout 事件 存在 错误 | 10.8 hover( ) 方法 修正 了 mouseout 事 
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<SCIIpt type="text/Javascript" > 

$(function(O) { 
| $("div").hover( // 绑 定 hover 合成 事件 
function(event){ // 注册 mouseover 事件 人 处理 晴 数 
| $("p").append(event.type + "<br />"): 


上 
function(event){ /注册 mouseout 事件 处 理 曙 数 


$("p").append(event.type + "<br />"): 


) 
}) 


</script> 


10.2.9 事件 命名 空间 


jQuery 支持 事件 命名 空间 ， 以 方便 事件 管理 。 

【示例 1】 为 div 元 素 绑 定 多 个 事件 类 型 ， 然后 使 用 命名 空 x 团 进行 规范 ， 从 而 方便 管理 。 所 请 事件 命 命名 
空间 ， 就 是 在 事件 类 型 后 面 以 点 语法 附加 一 个 别名 ， 以 便于 引用 事件 ， 如 click.a， 其 中 a 就 是 click 当前 事 
| 件 类 型 的 别名 ， 即 事件 命名 空间 。 
| <script type="text/Javascript" > 


$(function(){ 
$("div").bind("click.a", functionO{ / 绑 定 click 事件 
$("body").append("<p>click 事件 </p>"): 
Ds 


$("div").bind("dblclick.a", functionO{ / 绑 定 dblclick 事件 
$("body").append("<p>dblclick 事件 </p>"); 
}); 
$("div").bind("mouseover.a", fonction0{f  V 绑 定 mouseover 事件 
$("body").append("<p>mouseover 事件 </p>"): 
}); 
$("div").bind("mouseout.a", function0{ ，V 绑 定 mouseout 事件 
$("body").append("<p>mouseout 事件 </p>"): 
}); 
}) 
</script> 
<div>jQuery 命名 空间 </div> 


| 如 朱 在 所 绑 定 的 事件 类 型 后 面 附加 命名 空间 ， 则 在 删除 事件 时 ， 只 要 直接 指定 命名 空间 即 可 。 例 如 ， 
调用 下 面 一 行 代码 就 可 以 把 上 面 示例 中 绑 定 的 事件 全 部 删除 。 

$("div").unbind(".a"); 

同样 ， 如 果 为 相同 的 事件 类 型 设置 不 同 的 命名 空间 ， 如 果 仅 删除 某 一 个 事件 处 理 程序 ， 则 只 需要 指定 


命名 空间 即 可 。 
【示例 2】 如 有 果 直 接 单 击 段落 文本 ， 会 触发 命名 空间 为 a 的 click 事件 和 命名 空间 为 b 的 click 事件 ， 当 单 
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击 按钮 之 后 ， 则 删除 命名 空间 为 a 的 事件 类 型 ， 则 再 次 单 击 段落 文本 ， 就 只 能 触发 命名 空间 为 a 的 lick 事件 。 


<ScIlpt type="text/Javascript" > | 
$(finctionO { 
$("div").bind("click.a", functionO{ 
$("body").append("<p>click.a 事件 </p>"): 
}); 
$("div").bind("click.b", function(O { 
$("body").append("<p>clickb 事件 </p>"): 


}): 
$("input").click(functionO { 
$("div").unbind(".a"): // 注销 命名 空间 为 a 的 事件 
}): 
}) 
</script> 


<div>jQuery 命名 空间 </div> 
<input type="button" value=" 删除 事件 "” 依 


10.2.10 绑 定 多 个 事件 


jQuery 最 大 的 优势 就 是 提供 了 多 种 灵巧 的 用 法 ,方便 设计 师 的 开发 。 对 于 在 同一 个 对 象 上 绑 定 多 个 事 
件 来 说 ，jQuery 也 提供 了 很 多 种 方法 ， 这 些 方法 适用 于 不 同 的 开发 环境 以 及 习惯 用 法 ， 以 方便 设计 师 加 快 
开发 速度 0 | 
【示例 1】 为 当前 div 元 素 绑 定 两 个 click 事件 ， 当 单 击 div 元 素 时 ， 分 别 触 发 这 个 绑 定 的 事件 处 理 函 数 。 ， 
<script type="text/Javascript" > | 
$(function(O) { | 
$("div").bind("click", functionO { // 绑 定 click 事件 1 
$("body").append("<p>click 事件 1</p>"): 


1); 
$("div").bind("click", functionO { // 绑 定 click 事件 2 
$("body").append("<p>click.b 事件 2</p>"): 
1): 
}) 


</script> 
<div>jQuery 命名 空间 </div> 


【示例 2】 对 于 为 同一 个 对 象 绑 定 的 多 个 事件 ， 可 以 以 链 式 语法 的 形式 串 在 一 起 。 


<ScIlpt type="text/Javascript" > 
$(function(O) { 
$("div").bind("click", functionO { 
$("body").append("<p>click 事件 1</p>="): 
+).bind("click", function(O){ 
$("body").append("<p>click 事件 2</p>"): 
入 
1) 
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</script> 
<div>jQuery 多 事件 绑 定 </div> 


使 用 jQuery 定义 的 on0 等 注册 方法 ， 可 以 为 元 素 一 次 绑 定 多 个 事件 类 型 。 
【示例 3】 在 同一 个 bind0 方法 中 同时 绑 定 了 mouseover 和 mouseout 事件 类 型 。 
<Script type="text/Javascript" > 
$(function(){ 
$("div").on("mouseover mouseout", function(event){ V 同时 绑 定 多 个 事件 类 型 
$("body").append(event.type + "<br />"): 


De 
月 
</script> 


<div>jQuery 多 事件 绑 定 </div> 


【示例 4】 当 鼠标 指针 移 过 div 元 素 时 会 触发 mouseover 事件 ， 调 用 绑 定 的 事件 处 理 困 数 ， 而 当 鼠 标 指 


针 移出 div 元 素 时 会 触发 mouseout 事件 ,再 次 调用 该 浮 数 。 示 例 3 的 代码 可 以 拆 分 为 如 下 形式 。 


$(function(){ 
$("div").on("mouseover", function(event){ // 绑 定 mouseover 事件 
$("body").append(event.type + "<br />"): 
1 
$("div").on("mouseout", function(event) { / 绑 定 mouseout 事件 
$("body").append(event.type + "<br />"): 
1); 
}) 


10.2.11 ” 自 定 义 事件 


jQuery 支持 自 定 义 事件 ， 所 有 自 定义 事件 都 可 以 通过 trigger0 方法 触发 。 
【示例 】 自 定义 一 个 delay 事件 类 型 ， 并 把 它 绑 定 到 input 元 素 对 象 上 。 人 然后 在 按钮 单 击 事件 中 触发 自 定 


义 事件 ， 以 实现 延迟 响应 的 设计 效果 。 


<script type="text/Javascript" > 


$(functionO){ 
$("input").bind("delay", function(event){ ” V 目 定 义 并 绑 定 delay 事件 类 型 
setTimeout(function() { 1 延迟 啊 应 
alert(event.type); 
},1000); 
[AE 
$("input").click(function(O{ // 绑 定 click 事件 
$("input").trigger("delay"); 1/ 触发 日 定义 事件 
}); 
}) 
</script> 


<input type="button" value="jQuery 自 定义 事件 " 放 
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实际 上 ， 自 定义 事件 不 是 真正 意思 上 的 事件 ,读者 可 以 把 它 理解 为 自 定义 函数 ， 触 发 自 定义 事件 就 相 | 
当 于 调用 自 定义 函数 。 由 于 自 定义 事件 拥有 事件 类 型 的 很 多 特性 ， 因 此 自 定义 事件 在 开发 中 拥有 特殊 的 
用 途 。 | 


10.2.12 页面 初始 化 


jQuery 定义 了 ready0 方法 封装 JavaScript 原生 的 window.onload0 方法 。ready0 方法 表示 当 DOM 载 人 
就 绪 ， 并 可 以 查询 和 被 操纵 时 ， 能 够 自动 执行 的 方法 。 它 是 jQuery 事件 模型 中 最 重要 的 一 个 方法 ， 极 大 地 | 
提高 了 Web 应 用 程序 的 响应 速度 。 | 

【示例 1】 分 别 为 3 个 div 元 素 绑 定 ready 事件 ， 在 浏览 器 中 预览 ， 可 以 看 到 绑 定 的 3 个 事件 都 在 文档 加 | 
载 完 毕 后 被 集中 触发 。 

<scrlpt type="text/Javascript" > 


$("div").eq(0).ready(functionOi 
alert(1): 


让 

$("div").eq(1).ready(function(){ 
alert(2); 

}); 

$("div").eq(2) ready(functionO{ 
alert(3): 

)); 

</script> 


<div>[ 模块 1]</div> 

<div>[ 模块 2]</div> 

<div>[ 模块 3]</div> 

ready( 方法 一 般 按 如 下 方式 进行 调用 。 
$(document).ready(function0{// 页 面 初始 化 后 执行 的 函数 体 代 码 


月 : 

对 于 上 面 的 场 法 格式 可 以 侧 写 为 : 

jQuery(function($) { / 页面 初始 化 后 执行 的 函数 体 代码 
站 

或 者 : 

$(functionO { // 页 面 初始 化 后 执行 的 函数 体 代 码 
}): 


在 上 面 格式 中 可 以 看 到 ready0 方法 包含 一 个 参数 ， 该 参数 为 一 个 事件 处 理 函 数 。 同 时 ， 事 件 处 理 函 数 
也 包含 一 个 参数 ， 该 参数 引用 jQuery 函数 ， 并 实现 把 jQuery 肯 数 传递 到 ready 事件 处 理 曙 数 内 。 | 
【示例 2] 为 jQuery 起 一 个 别名 me， 设置 ready 事件 处 理 函 数 的 参数 名 为 me， 在 页 面 初始 化 处 理 函 数 
中 就 可 以 使 用 me 来 代替 jQuery 函数 。 


<scrlpt type="text/Javascript" > 
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$(function(me)! 
me("div").text("jQuery 函数 别名 少 : // 这 里 的 别名 me 指 代 jQuery 函数 


<div></div> 


也 可 以 省 略 这 个 参数 ， 在 默认 状态 下 jQuery 会 使 用 $ 或 者 同名 jQuery 别名 来 指 代 jQuery 函数 。 
【示例 3】 使 用 $ 和 jQuery 别名 。 
<script type="text/Javascript" > 
$(function(){ 
$("div").text("jQuery 函数 别名 "): 
jQuery("div").text("jQuery 困 数 别名 "); 


<div></div> 


jQuery 允许 在 文档 中 无 限 次 使 用 ready 事件 。 其 中 注册 的 事件 处 理 困 数 会 按照 代码 中 的 先后 顺序 依次 执 
行 。 但 是 ， 一 旦 使 用 jQuery 事件 模型 中 的 ready 事件 初始 化 页 面 ， 就 不 能 使 用 JavaScript 原生 的 load 事件 
类 型 了 了， 否则 就 会 发 生 冲 突 ， 而 不 能 触发 ready 事件 。 


10.2.13 ”使 用 ready 事件 


jQuery 的 ready 事件 与 JavaScript 的 load 事件 具有 相同 的 功能 ， 但 是 它们 在 触发 时 机 方面 还 存在 如 下 
区 别 。 

加 ”JavaScript 的 load 事件 是 在 文档 内 容 完 全 加 载 完毕 后 才 被 触发 的 。 这 个 文档 内 容 包括 页 面 中 所 有 他 

点 以 及 与 节点 关联 的 文件 。 这 时 JavaScript 才 可 以 访问 网 页 中 任何 元 素 和 内 容 。 这 种 情况 对 于 编写 
功能 性 的 代码 非常 有 利 ， 因 为 无 须 考 虑 加 载 的 次 序 。 

回 jQuery 的 ready 事件 在 DOM 完全 就 绪 时 就 可 以 被 触发 ， 此 时 文档 中 所 有 元 素 都 是 可 以 访问 的 ， 

但 是 与 文档 关联 的 文件 可 能 还 没有 下 载 完毕 。 通 俗 地 说 ， 就 是 浏览 器 下 载 并 完成 解析 HTML 的 
DOM 树 结构 ， 代 码 就 可 以 运行 。 

例如 ， 对 于 一 个 大 型 图 库 网 站 来 说 ， 为 页 面 中 所 有 显示 的 图 像 绑 定 一 个 初始 化 设置 的 脚本 。 如 果 使 用 
JavaScript 原生 的 load 事件 来 设计 ， 那 么 用 户 在 使 用 这 个 页 面 之 前 ， 必 须 等 待 页 面 中 所 有 图 像 下 载 完 毕 才 能 
够 实现 。 在 load 事件 等 待 图 像 加 载 过 程 中 ， 如 果 行 为 还 未 添加 到 那些 已 经 加 载 的 图 像 中 ， 则 此 时 如 果 用 户 
操作 它们 ， 可 能 会 导致 很 多 意 想 不 到 的 问题 。 如 果 使 用 jQuery 的 ready 事件 ， 则 在 DOM 树 结 构 解 析 之 后 ， 
就 立即 触发 页 面 初始 化 事件 ， 从 而 避免 使 用 load 事件 所 种 来 的 问题 。 

但 是 ， 由 于 jQuery 的 ready 事件 被 过 早 地 触发 , 虽然 DOM 树 结 构 已 经 解析 完毕 ,但 是 很 多 元 素 的 属 
性 未 必 生 效 。 例 如 ， 很 多 图 像 还 没有 加 载 完 毕 ， 导 致 这 些 图 像 的 属性 无 效 ， 如 图 像 的 高 度 和 宽度 。 要 解决 
这 个 问题 ， 可 以 使 用 jQuery 的 load 事件 进行 触发 ， 该 事件 等 效 于 JavaScript 的 load 事件 。 

$(window).load(functionO{// 页 面 初始 化 后 执行 的 函数 体 代 码 

已 
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等 效 于 : 
window.onload = functionO{// 页 面 初始 化 后 执行 的 函数 体 代码 
} 
JavaScript 的 load 事件 存在 一 个 很 严重 的 缺陷 ， 即 它 不 允许 多 次 调用 。 
【示例 1】 分 两 次 调用 load 事件 ， 但 是 当 网 页 加 载 完 毕 后 ，JavaScript 只 触发 了 第 二 个 load 事件 调用 。 
window.onload = function(){ 

alert(" 一 次 调用 load 事件 "): 


} 
window.onload = function(){ 

alert(" 二 次 调用 load 事件 "): 
} 


实际 上 ,第 一 次 事件 调用 已 经 被 第 二 个 调用 覆盖 。 要 解决 两 次 调用 之 间 的 冲突 问题 ， 则 可 以 把 两 个 页 
面 初始 化 函数 放 在 同一 个 load 事件 中 。 | 
【示例 2】 按 如 下 方式 修改 示例 1。 
window.onload = function(){ 
(function(){ 
alert(" 一 次 调用 load 事件 "): 
用 人: 
(function(){ 
alert(" 二 次 调用 load 事件 "): 
D0 | 
} | 
上 面 代码 直接 在 load 事件 的 处 理 盟 数 中 定义 和 调用 两 个 匿名 图 数 。 当 然 ， 也 可 以 把 这 两 个 匿名 因数 改 
为 图 数 声明 方式 定义 ， 然 后 在 load 事件 处 理 函 数 中 调用 。 
虽然 通过 间接 的 方式 解决 了 load 事件 多 次 调用 的 问题 ， 但 是 load 事件 仍然 存在 很 多 局 限 。 例 如 ， 在 多 
个 JavaScript 文件 中 ， 可 能 每 个 JavaScript 文件 都 会 用 到 window.load0 方法 ,在 这 种 情况 下 使 用 上 面 的 方法 
是 无 法 解决 的 ， 同 时 无 法 保证 按 顺序 执行 多 个 注册 的 函数 。 | 
jQuery 的 ready 事件 能 够 很 好 地 解决 这 个 问题 ， 在 同一 个 文档 中 可 以 进行 多 次 调用 。 
【示例 3】 针 对 示例 2， 可 以 使 用 如 下 方法 轻松 解决 ， 即 便 在 不 同 JavaScript 文件 中 都 可 以 无 限制 多 次 调 
用 ready 事件 。 | 
$(function(){ 
alert(" 一 次 调用 load 事件 ") 


a 
alert(" 二 次 调用 load 事件 ") 
外 
【拓展 】 | 
针对 页 面 初始 化 处 理 问题 ，jQuery 提供 了 灵活 和 方便 的 解决 方案 ,但 是 jQuery 的 ready 事件 与 JavaScript 
的 load 事件 存在 天 然 的 冲突 。 如 果 读 者 在 页 面 中 对 于 jQuery 的 ready 事件 使 用 需求 不 是 那么 强烈 ， 不 妨 日 
定义 一 个 addLoadEvent0 方法 来 解决 window.onload0 方法 注册 事件 存在 的 缺陷 。 | 
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【示例 4】addLoadEvent0 方法 的 代码 如 下 : 
tunction addLoadEvent(ftunc){ 
var oldOnload = window.onload: /把 window.onload 事件 处 理 男 数 的 值 存 人 变量 oldOnload 
让 (typeof window.onload != 'functionn){// 如 果 window.onload 事件 没有 绑 定 任何 事件 处 理 函 数 ， 则 为 其 添加 新 


/ 的 事件 处 理 清 数 
window.onload = fonc: 
}else{ // 如 果 window.onload 事件 已 绑 定 事件 处 理 因 数 ， 则 重新 绑 定 事件 处 理 
/ 图 数 ， 在 事件 处 理 毅 数 中 先 执行 厚 来 已 绑 定 的 事件 处 理 图 数 ， 然 后 调 
1/ 用 新 添加 的 事件 处 理 函 数 
window.onload = function()1+ 
oldOnload(): 
tunc(): 


3 
| 虽然 window.onload 只 能 被 赋值 一 次 (load 事件 只 能 绑 定 一 个 事件 处 理 困 数 ), 但 是 可 以 设置 load 的 事 


” 件 处 理 函 数 为 一 个 管道 ， 并 借助 这 个 管道 无 限 次 地 调用 load 事件 。addLoadEvent( 方法 的 工作 流程 如 下 : 
| (1) 把 现 有 的 window.onload 事件 处 理 函 数 的 值 存 人 变量 oldOnload 。 
(2 ) 如 果 在 这 个 处 理 本 数 上 没有 绑 定 任何 图 数 ， 则 为 其 添加 新 的 图 数 。 
(3 ) 如 果 在 这 个 处 理 卫 数 上 已 经 绑 定 了 一 些 婧 数 ， 就 把 函数 追 回 到 现 有 清 数 的 尾部 。 
| 浏览 硕 在 加 载 HTML 文档 内 容 时 ， 在 默认 状态 下 是 自 上 而 下 地 执行 JavaScript 代码 。 如 果 要 改变 load 
。 事件 处 理 函 数 的 执行 顺序 ， 则 可 以 利用 addLoadEvent0 方法 改变 调用 顺序 。 
在 开发 过 程 中 ， 如 果 需 要 给 load 事件 绑 定 多 个 靖 数 ， 而 又 不 确定 load 事件 是 否 已 经 绑 定 了 困 数 ， 则 使 
用 addLoadEventO 方法 就 能 很 轻松 地 解决 这 个 问题 。 
借助 addLoadEvent0 方法 ， 用 户 可 以 多 次 调用 load 事件 。 
addLoadEvent(function( ){ 
alert(" 一 次 调用 load 事件 "): 
a 
alert(" 二 次 调用 load 事件 "): 
ee 
alert(" 三 次 调用 load 事件 "): 
Fs 


103 案例 实战 
本 节 提 供 多 个 示例 ， 帮 助 读 者 练习 使 用 jQuery 操作 事件 。 


10.3.1 定义 快捷 键 


本 例 设计 网 页 的 四 部 分 内 容 ， 分别 为 “主页 ” “介绍 “联系” “链接 ”"。 用 户 可 以 通过 使 用 鼠标 分 别 单 
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击 各 个 菜单 项 来 查看 每 一 部 分 的 内 容 。 同 时 ， 也 可 以 使 用 快捷 键 对 其 进行 访问 。 该 例 中 设 定 的 快捷 键 : A 刍 
切换 到 “主页 ”"，s 键 切换 到 “介绍 "，D 键 切换 到 “联系 ”,F 键 切换 到 “链接 "， 示 例 演示 效果 如 图 10.9 


所 示 。 


ne mestecahosttestinder ramshome 


主 访 (快捷 证: A 前 总 ( 迟 捷 吊 : 号 联系 (快捷 诗 : DY 别 接 ( 快 按 广 : F) 


主页 


SjQuerv snmtieg 


页 面 结 构 如 下 : | 


<div 1d="Wwrapper"> 
<hl> 网 站 标题 </h1> 
<UlL 1d—"nav"> 
<]i>=a hre 传 '"#home"> 主页 (快捷 键 : A)</a></li> 
<]i><a href="#about"> 介绍 (快捷 键 ; S)</a></li> 
<]i>=<a href 伍 "#contact"> 联系 (快捷 键 : D)</a></li> | 
<]li><a hre 伍 "#links"> 链接 (快捷 键 : F)</a></li> 
</l> 
<div 1d="home" class="container"> 
<h2> 主页 </h2> 
<p><1meg src="1mages/l.jpe" height="200" alt=""></p> | 
</div> 
<div 1d="about" class="container">*…</dIv> 
<div 1d="contact" class="container">***</dIv> 
<div 1d="links" class="container">***</dIv> 
<div id="foot"> 版 权 信 息 </div> | 
</dIv> 


$(document).ready(function(){ | 
// 用 类 容器 隐藏 所 有 div | 
// 只 显示 有 D 为 home 的 那个 
$(".container").css("display","none"): 
$("#home").css("display","block"): | 
/ 在 所 有 容器 都 隐藏 后 进行 导航 工作 | 
showViaLink($("ul#nav li a")); | 
/ 侦 听 任何 导航 键 按 下 活动 
$(document).keypress(function(e) { | 
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switch(e.which) { 
1/ 用户 按 A 键 
Case 97: showV1liakKeypress("#home"): break: 
/用 户 按 S 键 
case 114: showViaKEeypress("#about ): break: 
1/ 用 尸 按 吃 键 
case 100: showViaKeypress("#contact" ):;break: 
/用 户 按 工 键 
case 102: showViaKeypress("#]lmks"): 
} 
和 
}); 
// 显示 给 定 元 素 并 隐藏 所 有 其 他 元 素 
function showViaKeypress(element 1d){ 
$(".container").css("display"."none"): 
// 如 果 多 个 键 被 快速 按 下 ， 将 隐藏 除了 最 后 一 个 按 下 的 键 的 div 
$(".container").hide(1):; 
$(element id).slideDown("slow"): 


b 
// 根据 链接 'href 显示 适当 的 DIV 
tunction showViaLimk(array){ 
airay.each(ftunction(1){ 
$(this).click(function() 1{ 
var target = $(this).attr("href"): 
$(".contamer").css("display","none"): 
$(target).slideDown("slow"): 
}); 
aE 
} 
这 里 使 用 keypress0 函数 对 用 户 的 按键 操作 进行 监听 ， 当 匹配 到 相应 的 按键 时 ， 执 行 相应 的 显示 操作 。 
在 上 述 代 码 中 ， 使 用 e.which 得 到 对 应 键 的 ASCI 码 值 ， 然 后 逐个 进行 处 理 ，showViaKeypress(0) 图 数 用 于 
根据 其 传递 进去 的 参数 显示 相应 的 文本 内 容 ， 其 参数 用 于 组 装 jQuery 选择 天 。 


次 提示 : 使 用 手工 代码 存在 一 个 问题 ， 就 是 它 使 用 的 是 单独 的 一 个 按键 来 设置 快捷 键 ， 因 此 如 果 页 面 上 
存在 需要 输入 这 些 字母 的 时 候 ， 将 会 出 现 不 期 望 的 结果 。 例 如 ， 在 页 面 上 增加 一 个 文本 框 ， 用 
于 输入 文本 内 容 。 因 此 ， 一 般 使 用 组 合 键 来 作为 快捷 键 ， 这 样 就 可 以 很 好 地 避免 文本 框 的 输入 
内 容 与 快捷 键 冲 突 的 问题 。 但 是 这 样 一 来 ， 另 外 一 个 问题 就 出 现 了 : 如 果 使 用 组 合 键 ， 这 里 的 
处 理 将 变 得 不 太 方 便 。 这 时 建议 使 用 jQuery 插件 jquery.hotkeys.js， 使 用 它 可 以 很 方便 地 设 定 和 
使 用 组 合 键 ， 演 示 示 例 请 参考 本 节 示 例 源 代码 中 的 indexl.html 文件 。 


10.3.2 设计 软 键 盘 
在 浏览 网 页 时 ， 经 常 需要 使 用 软 键盘 ， 例 如 需要 用 户 输入 银行 密码 的 时 候 ， 使 用 软 键盘 通过 用 户 的 鼠 


标 单 击 来 进行 密码 录入 ， 可 以 有 效 地 避免 一 些 恶 意 木 马 监听 用 户 的 键盘 录入 来 获取 用 户 密码 的 行为 。 本 例 
设计 的 软 键盘 效果 如 图 10.10 所 示 。 
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图 10.10 ”设计 软 键盘 效果 


设计 的 软 键盘 结构 如 下 : 


<div id="keyboard"> | 
<div 1d="rOWO"> 

<Input name="accent" type="button" value=" "> 

<Input name="1" type="button" value="1"> | 


<input name="=" type="button" value="="> 

<Input name="backspace" type="button" value="Backspace"> 
</div> 
<div id="rowO shift">…</div> | 
<div id="row1">…</div> | 
<div id="row!] shift">-…</div> | 
<div 1d="row2">:…*</div> 
<div 1d="row2 shift >…</dv> 
<div id="row3">…</div> | 
<div 1d="row3 Shift >…</ dv> | 
<div 1d="spacebar"> 

<Input name="spacebar" type="button" value=" "> 
</div> 

</div> 


$(document).ready(function() { 

Var shifton = talse: | 

/ 在 单 击 链接 时 切换 键盘 以 显示 或 隐藏 | 

$("#showkeyboard").click(function(e) { | 

Var height = $('#keyboard').height( ); | 

Var width = $(#keyboard').width( ): 
leftVal=e.pageX-60+"pX": 

topVal=e.pageY-12+"px"; | 

$(#keyboard').css( {left:leftVal,top:topVal} ).toggle(): | 

hE | 


$("#keyboard").draggable(): ”/W/ 使 键盘 拖 动 | 
fnction onShift(e) { // 在 键盘 上 的 正常 键 和 换 档 刍 之 间 切 换 |. 
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Var 1: 
ie 
| for(1=0:1<4:1++) { 
| Var IOWId = "#row" + L: 


$(rowid).hide(): 


| $(rowidt+" shift").show(): 
} 
else 1 
for(1=0:1<4:1++) { 
Var TOW1d = "#row" 十 工 
$(rowid).show(): 
$(rowid+" shift").hide(); 


} 
} 


} 
/ 当 键 盘 上 的 任何 键 被 按 下 时 调用 困 数 
$("#keyboard mput").bind("“click", ftunction(e) { 
if( $(this).val() — Backspace' ) { 
$(#pwd').replaceSelection("", true): 
} 
else 这 $(this).valO — "Shift" ) { 
if(shifton 一 false) { 


onShift( 1): 
shifton = true: 
+ else { 
onSshift(0): 
shifton = false: 
} 
}else { 


$(#pwd').replaceSelection($(this).val(), true): 
if(shifton — true) { 

onShift(0): 

shifton = false: 


3 
SE 
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本 市 提供 多 个 事件 操作 案例 ， 感 兴趣 的 读者 可 以 扫 人 码 阅 读 。 
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( 贸 m 视频 讲解 . 1 小 时 21 分 钟 ) 


浏览 器 与 服务 器 之 间 采 用 HITP 协议 通信 。 用 户 在 浏览 器 地 址 栏 输入 一 个 网 址 ， 
或 者 通过 网 页 表单 向 服务 器 提交 内 容 ， 这 时 浏览 器 就 会 向 服务 器 发 出 HITP 请 求 。 

1999 年 ， 微 软 公司 发 布 夺 浏览 器 5.0 版 ， 第 一 次 引入 新 功能 : 多 许 JavaScript 脚 
本 向 服务 器 发 起 HITP 请 求 。 这 个 功能 当时 并 没有 引起 注意 ， 直 到 2004 年 Gmail 发 布 
和 2005 年 Google Map 发 布 ， 才 引起 广泛 重视 。2005 年 2 月 ，Ajax 这 个 词 第 一 次 被 正 
式 提 出 ， 指 围绕 这 个 功能 进行 开发 的 一 整套 做 法 。 从 此 ，Ajax 成 为 脚本 发 起 HITP 通 
信 的 代名词 ，W3C 也 在 2006 年 发 布 了 它 的 国际 标准 。 


【学 习 重 点 】 

pl 了 解 Alax 基础 知识 。 

| 正确 使 用 XMLHttpRequest。 

| 能 够 灵活 使 用 ]Query 实现 异步 通信 。 


J zo 从 入 门 到 精通 ( 微 课 精 编 版 ) 


11.1 XMLHttpRequest 1.0 基础 


Note XMLHttpRequest 是 一 个 API， 它 为 客户 端 提供 了 在 客户 问 和 服务 右 之 间 传 输 数 据 的 功能 。 它 提供 了 一 
个 通过 URL 来 获取 数据 的 简单 方式 ， 并 且 不 会 使 整个 页 面 刷新 ; 这 使 得 网 页 只 更 新 一 部 分 页 面 而 不 会 打扰 
| 到 用 户 。XMLHttpRequest 在 Ajax 中 被 大 量 使 用 。 
| 所 有 现代 浏览 右 都 支持 XMLHttpRequest API， 如 正 7+、Firefox 、Chrome 、Safari 和 Opera。 通 过 一 行 
| 简单 的 JavaScript 代码 ， 就 可 以 创建 XMLHttpRequest 对 象 。 代 助 XMLHttpRequest 对 象 的 属性 和 方法 ， 就 
可 以 实现 异步 通信 功能 。 


11.1.1 定义 XMLHttpRequest 对 象 


使 用 XMLHttpRequest 对 象 实现 异步 通信 一 般 需 要 下 面 几 个 步骤。 

第 1 步 ， 定义 XMLHttpRequest 对 象 。 

第 2 步 ， 调 用 XMLHttpRequest 对 象 的 open0 方法 打开 服务 器 端 URL 地 址 。 

第 3 步 ， 注 册 onreadystatechange 事件 处 理 函 数 ， 准 备 接收 响应 数据 并 进行 处 理 。 

第 4 步调 用 XMLHttpRequest 对 象 的 send0 方法 发 送 请 求 。 

现代 标准 浏览 器 都 支持 XMLHttpRequestAPI， 从 正 5.0 版 本 开始 就 以 ActiveX 组 件 形式 支持 XMLHttpRequest， 
在 正 70 版 本 中 标准 化 XMLHttpRequest， 人 允许 通过 window 对 象 进行 访问 。 不 过 ， 所 有 浏览 器 的 XMLHttpRequest 


。 对 象 都 提供 了 相同 的 属性 和 方法 。 

| 【示例 】 下 面 函 数 采 用 一 种 更 高 效 的 工厂 模式 把 定义 XMLHttpRequest 对 象 功能 进行 封装 ， 这 样 只 要 调 
| 用 createXMLHTTPObjectO 方法 就 可 以 返回 一 个 XMLHttpRequest 对 象 。 

| /定义 XMLHttpRequest 对 象 

/参数 : 无 


// 返回 值 : XMLHttpRequest 对 象 实例 
function createxMLHIIPOblectO{ 
var XMLHttpFactories = [ /兼容 不 同 浏览 部 和 版 本 的 创建 国 数 数组 
function () {return new XMLHttpRequest()}, 
tunction () {return new ActiveXObject("Msxml2.XMLHTTP")}., 
function () {return new ActiveXObject("Msxml3.XMLHTTP")}, 
function () {return new ActiveXObject("Microsoft. XMLHTTP")}. 
| 
var xmlhttp = false: 
for (var i= 0:;1< XMLHttpFactories.leneth; 1++ ){ 
1/ 尝试 调用 匿名 遇 数 ， 如 果 成 功 则 返回 XMLHttpRequest 对 象 ， 否 则 继续 调用 下 一 个 


tryt{ 
Xmlhttp = XMLHttpFactories|1|(); 
}catch(e): 
continue: 由 如果 发 生 异 常 ， 则 继续 调用 下 一 个 孙 数 
} 
break: /如果 成 功 ， 则 中 止 循环 
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return xmlhttp: /返回 对 象 实例 
} 


上 面 隐 数 首 先 创 建 一 个 数组 ， 数 组 元 素 为 各 种 创建 XMLHttpRequest 对 象 的 匿名 盟 数 。 第 一 个 元 素 是 
创建 一 个 本 地 对 象 ， 而 其 他 元 素 将 针对 正 浏览 旭 的 不 同 版 本 尝试 创建 ActiveX 对 象 。 然 后 设置 变量 xmlhttp 
为 false， 表 示 不 文 持 Ajax。 接 着 遍历 工厂 内 所 有 图 数 并 莹 试 执行 它们 ， 为 了 避免 发 生 异 和 贡 ， 把 所 有 调用 肯 
数 放 在 try 子 句 中 执行 ， 如 果 发 生 错 误 ， 则 在 catch 子 句 中 捕获 异常 ， 并 执行 continue 命令 ， 返 回 继续 执行 ， 
而 不 是 抛 出 异常 。 如 果 创 建成 功 ， 则 终止 循环 ， 返 回 创 建 的 XMLHttpRequest 对 象 实例 。 


11.1.2 ”建立 XMLHttpRequest 连接 


创建 XMLHttpRequest 对 象 之 后 ， 就 可 以 使 用 XMLHttpRequest 的 open0 方法 建立 一 个 HTTP 请 求 。 
open0 方法 的 用 法 如 下 所 示 。 
oXMLHttpRequest.open(bstrMethod., bstrUr], varAsync, bstrUser, bstrPassword); 


该 方法 包含 5 个 参数 ， 其 中 前 两 个 参数 是 必需 的 。 简 单 说 明 如 下 : 
回 bstrMethod: HTTP 方法 字符 串 ， 如 POST、GET 等 ， 大 小 写 不 敏感 。 | 
回 bstrUrl: 请 求 的 URL 地 址 字符 串 ， 可 以 为 绝对 地 址 或 相对 地 址 。 
回 “varAsync: 布尔 值 ， 可 选 参数 ， 指 定 请 求 是 否 为 异步 方式 ， 默 认为 tue。 如 果 为 真 ， 当 状态 改变 时 
会 调用 onreadystatechange 属性 指定 的 回调 浮 数 。 
加 ”bstrUser: 可 选 参数 ， 如 果 服 务 器 需要 验证 ， 该 参数 指定 用 户 名 ， 如 果 未 指定 ， 当 服务 顺 需 要 验证 | 
时 ,会 弹出 验证 窗口 。 | 
回 bstrPassword: 可 选 参数 ， 验 证 信息 中 的 密码 部 分 ， 如 果 用 户 名 为 空 ， 则 此 值 将 被 忽略 。 / 
然后 ， 使 用 XMLHttpRequest 的 send0 方法 发 送 请 求 到 服务 器 端 ， 并 接收 服务 器 的 响应 。send0 方法 的 
用 法 如 下 。 | 
oXMLHttpRequest.send(varBody);: | 


参数 varBody 表示 将 通过 该 请 求 发 送 的 数据 ， 如 果 不 传递 信息 ， 可 以 设置 参数 为 null。 

该 方法 的 同步 或 异步 方式 取决 于 open0 方法 中 的 bAsync 参数 ， 如 果 bAsync 一 false， 此 方法 将 会 等 待 
请 求 完成 或 者 超时 时 才 会 返回 ， 如 果 bAsync 一 tue， 此 方法 将 立即 返回 。 

使 用 义 MLHttpRequest 对 象 的 responseBody 、responseStream 、responseText 或 responseXML 属性 可 以 接 | 
收 啊 应 数据 。 

【 示例】 简单 演示 实现 异步 通信 的 方法 ， 代 码 省 略 了 定义 AMLHttpRequest 对 象 的 困 数 。 

xmlHttp.open("GET","server.asp", false): 

xmlHttp.send(null): 

alert(xmlHttp.response Text); 


在 服务 此 端 文件 ( server.asp ) 中 输入 下 面 的 字符 串 。 
Hello World 


在 浏 览 副 中 预 宛 客 户 端 交互 页 面 ， 就 会 弹出 一 个 提示 对 话 框 ， 显 示 “Hello World” 的 提示 信息 。 该 字 | 
符 串 是 侍 助 XMLHttpRequest 对 象 建立 的 连接 通道 ， 从 服务 带 痪 啊 应 的 字符 串 。 
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11.1.3 发送 GET 请 求 


发 送 GET 请 求 时 ， 只 需 将 包含 查询 字符 串 的 URL 传人 open0 方法 ， 设 置 第 一 个 参数 值 为 “GET” 即 
可 。 服 务 器 能 够 在 URL 尾部 的 查询 字符 串 中 接收 用 户 传递 过 来 的 信息 。 

使 用 GET 请 求 较 简单 ， 比 较 方 便 ， 它 适合 传递 简单 的 信息 ， 不 易 传 输 大 容量 或 加 密 数 据 。 

【示例 】 在 页 面 (main html ) 中 定义 一 个 请 求 链接 ， 并 以 GET 方式 传递 一 个 参数 信息 callback=functionName。 


<script> 

1/ 省略 定义 XMLHttpRequest 对 象 明 数 

function request(url){ // 请 求 了 水 数 
xmlHttp.open("GET",url, false); /以 GET 方式 打开 请 求 链 接 
xmlHttp.send(null): 1/ 发 送 请 求 


alert(xmlHttp.response Text): 1/ 获取 啊 应 的 文本 字符 串 信息 


} 
window.onload = function(O) { // 页 面 初始 化 
var b = document.eetElementsByTaeName("mput")|0|l: 
b.onclick = function(){ 
Var url = "server.asp?callback=functionName" 
/设置 向 服务 器 端 发 送 请 求 的 文件 ， 以 及 传递 的 参数 信息 
request(url): / 调用 请 求 晒 数 
} 
EL 
</script> 
<hl>Ajax 异步 数据 传输 </h1> 
<input name="submit"type="button" id="submit"value=" 向 服务 器 发 出 请 求 " /> 


在 服务 髓 端 文 件 ( server.asp ) 中 输入 下 面 的 人 代码， 获取 查询 字符 串 中 callback 的 参数 值 ， 并 把 该 值 啊 
应 给 客 尸 问 。 
“DLANGUAGE="VBSCRIPT" CODEPAGFE="65001"%> 


< 一 0 

callback = Request.QueryString("callback") 
Response. Write(callback) 

2%0> 


在 训 览 郑 中 预 览 页 面 ， 当 单 击 提交 按钮 时 ， 会 弹出 一 个 提示 对 话 框 ， 显 示 传 递 的 参数 值 。 


沪 提示 : 查询 字符 串通 过 问号 (?) 前 级 附加 在 URL 的 末尾 ， 发 送 数据 是 以 连 字符 (及 ) 连接 的 一 个 
或 多 个 “名 / 值 ” 对 。 每 个 名 称 和 值 都 必须 在 编码 后 才能 用 在 URL 中 ， 用 户 使 用 JavaScript 的 
encodeURIComponentO 函数 对 其 进行 编码 ， 服 务 器 端 在 接收 这 些 数据 时 也 必须 使 用 
decodeURIComponentO 函数 进行 解码 。URL 了 最 大 长 度 为 2048 字符 (2KB )。 


11.1.4 发 送 POST 请 求 


POST 请 求 文 持 发 送 任意 格式 、 任 意 长 度 的 数据 ， 一 般 多 用 于 表单 提交 。 与 GET 发 送 的 数据 格式 相似 ， 
POST 发 送 的 数据 也 必须 进行 编码 ， 并 用 连 字 符 ( 灸 ) 进行 分 隔 ， 格 式 如 下 : 


send("namel=valuel &name2=value2:…"): 


“IGe 
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在 发 送 POST 请 求 时 ， 参 数 不 会 被 附加 到 URL 的 末尾 ， 而 是 作为 send0 方法 的 参数 进行 传递 。 

【示例 1】 以 11.1.5 节 示 例 为 基础 ， 使 用 POST 方法 向 服务 器 传递 数据 ， 定 义 如 下 请 求 函 数 。 

function request(url){ 

xmlHttp.open("POST",url, false): 
xmlHttp.setRequestHeader('Content-type','application/X-www-torm-urlencoded'): 
// 设置 发 送 数据 类 型 

xmlHttp.send("callback=functionName"): 

alert(xmlHttp.response Text): 

} 

在 open0 方法 中 ， 设 置 第 一 个 参数 为 POST， 然后 使 用 setRequestHeader0 方法 设置 请 求 消息 的 内 容 类 
型 为 application/x-www-form-urlencoded， 一 般 使 用 POST 发 送 请 求 时 都 必须 设置 该 选项 ， 否 则 服务 佣 无 法 
识别 传递 过 来 的 数据 。 | 

深 提示 : setRequestHeader0 方法 的 用 法 如 下 : 

xmlhttp.setRequestHeader("Header-name", "value"); 

一 般 设 置 头 部 信息 的 User-Agent 首部 为 XMLHTIP， 以 便于 服务 端 器 能 够 辨别 出 
XMLHttpRequest 异步 请 求 和 其 他 客户 端 普通 请 求 。 

xmlhttp.setRequestHeader("User-Agent", "XMLHTTP"):; 

这 样 就 可 以 在 服务 器 端 编 写 脚 本 分 别 为 现代 浏览 器 和 不 支持 JavaScript 的 浏览 器 呈现 不 同 
的 文档 ， 以 提高 可 访问 性 的 手段 。 

如 果 使 用 POST 方法 传递 数据 ， 还 必须 设置 另 一 个 头 部 信息 。 


Xmlhttp.setRequestHeader( "Content-type ", " application/ 
xX-WWW-form-urlencoded "): 


然后 ， 在 send0 方法 中 附加 要 传递 的 值 ， 该 值 是 一 个 或 多 个 “名 / 值 ” 对， 多 个 “名 / 值 ” 对 之 间 使 用 
“&&” 分 隐 符 进行 分 阳 。 在 “名 / 值 ” 对 中 ,“ 名 ”可 以 为 表单 域 的 名 称 ( 与 表单 域 相对 应 )“ 信 ”可 以 是 回 
定 的 值 ， 也 可 以 是 一 个 变量 。 

设置 第 三 个 参数 值 为 false， 关 闭 异 步 通信 。 | 

最 后 ， 在 服务 器 端 设计 接收 POST 方式 传递 的 数据 ， 并 进行 响应 。 

<%WODLANGUAGE="VBSCRIPT" CODEPAGE="65001"%> 

<00 

callback = Request.Form("callback") 

Response. Write(callback) | 

%> | 


用 于 发 送 POST 请 求 的 数据 类 型 ( Content Type ) 通常 是 application/x-www-form-urlencoded， 这 意味 着 
可 以 使 用 text/xml 或 application/xml 类 型 加 服务 髓 直接 发 送 XML 数据 ， 甚 至 使 用 applicatiomrjson 类 型 发 送 


JavaScript 对 象 。 
【示例 2】 回 服务 器 端 发 送 XML 类 型 的 数据 ， 而 不 是 简单 地 串 行 化 “名 / 值 ” 对 数据 。 
function request(url){ 


xmlHttp.open("POST",url, false): 
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XmlHttp.setRequestHeaderCContent-type''textxml): /设置 发 送 数据 类 型 
xmlHttp.send("<bookstore><book id='"]'> 书 名 1</book><book id='2> 书 名 2</book></bookstore>"): 
4 


六 提示 : 使 用 GET 方式 传递 的 信息 量 是 非常 有 限 的 ， 而 使 用 POST 方式 传递 的 信息 是 无 限 的 ， 且 不 受 字 
符 编 码 的 限制 ， 还 可 以 传递 二 进 制 信 息 。 对 于 传输 文件 ， 以 及 大 容量 信息 ， 多 采用 POST 方式 。 
另外 ， 当 发 送 安 全 信息 或 XML 格式 数据 时 ， 也 应 该 考虑 选用 这 种 方法 来 实现 。 


11.1.5 ”转换 串 行 化 字符 串 


GET 和 了 POST 方法 都 是 以 名 / 值 对 字符 串 的 形式 发 送 数据 。 
1. 传输 名 / 值 对 信息 
| 与 JavaScript 对 象 结构 类 似 ， 多 在 GET 参数 中 使 用 。 例 如 ， 下 面 是 一 个 包含 3 对 名 / 值 的 JavaScript 对 
i 
USer:"CCS8", 
padd: "123456", 
emall: "css8((Wmysite.cn" 
b 


将 上 面 原生 JavaScript 对 象 数据 转换 为 串 行 格式 显示 为 : 
user:"ccs8"&padd:"123436"&email:"css8(Mmysite.cn" 
2. 传输 有 序数 据 列表 


/ 与 JavaScript 数组 结构 类 似 ， 多 在 一 系列 文本 框 中 提交 表单 信息 时 使 用 ， 它 与 上 一 种 方式 不 同 ， 所 提交 
的 数据 按 顺序 排列 ， 不 可 以 随意 组 合 。 例 如 ， 下 面 是 一 组 有 序 表单 域 信息 ， 它 包含 多 个 值 。 


| 

{ name:"text", value:"css8" }, 

{ name:"text", value:"123456" }, 

{ name:"text", value:"css8((Dmysite.cn" } 
] 


将 上 面 有 序 表单 数据 转换 为 串 行 格式 ， 显 示 如 下 : 


text:"ccs8"& text:"1234536"& text:"css8(Vmysite.cn" 


【示例 】 定 义 一 个 盟 数 负责 把 数据 转换 为 串 行 格式 提交 ， 话 细 代码 如 下 : 
/把 数组 或 对 象 类 型 数据 转换 为 串 行 字 符 串 
// 参数 ; data 表示 数组 或 对 象 类 型 数据 
/返回 值 : 串 行 字符 串 
function tosStrmngl(data){ 
var a= ||: 
这 data.constructor 一 Array){ // 如 果 是 数组 ， 则 过 历 读 取 元 素 的 属性 值 ， 并 存 人 数组 
for(var1i=0 ;1< data.length ;1+HH){ 
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apush(data[ilname + "=" + encodeURIComponent(data[il.value)): 
} 
} // 如 果 是 对 象 ， 则 避 历 对 象 ， 读 取 每 个 属性 值 ， 存 入 数组 
else{ 
for(var 11n dataj{ 


} 
} 
return a.join("&"): /把 数组 转换 为 串 行 字符 串 ， 并 返回 


11.1.6 ” 跟 踊 状态 


使 用 XMLHttpRequest 对 象 的 readyState 属性 可 以 实时 跟踪 异步 交互 状态 。 当 该 属性 发 生变 化 时 ， 就 
触发 readystatechange 事件 ， 调 用 该 事件 绑 定 的 回调 图 数 。readyState 属性 包括 5 个 值 ， 话 细 说 明 如 表 11.1 
所 示 。 

表 11.1 readyState 属性 值 
返 值 说 有明 
0 未 初始 化 。 表 示 对 象 已 经 建立 ， 但 是 尚未 初始 化 ， 尚 未 调用 open0 方法 
1 初始 化 。 表 示 对 象 已 经 建立 ， 尚 未 调用 send0 方法 
2 发 送 数 据 。 表 示 send0 方法 已 经 调用 ,但 是 当前 的 状态 及 HITP 头 未 知 
数据 传送 中 。 已 经 接收 部 分 数据 ， 因 为 啊 应 及 HITP 头 不 全 ， 这 时 通过 responseBody 和 responseText 
获取 立 分 获 据 会 出 现 钳 误 
4 完成 。 数 据 接收 完毕 ， 此 时 可 以 通过 responseBody 和 responseText 获取 完整 的 啊 应 数据 


如 果 readyState 属性 值 为 4， 则 说 明 啊 应 完毕 ， 那 么 就 可 以 安全 谈 取 返回 的 数据 。 另 外 ， 还 需要 监测 ， 
状态 码 ， 只 有 当 HITP 状态 码 为 200 时 ， 才 表示 HTTP 响应 顺利 完成 。 | 
在 XMLHttpRequest 对 和 象 中 可 以 借助 status 属性 获取 当前 的 HTTP 状态 他 。 如 采 readyState 属性 值 为 4， 
日 status ( 状态 码 ) 属性 值 为 200， 那 么 说 明 HTTP 请 求 和 啊 应 过 程 顺利 完成 。 
【示例 】 定 义 一 个 函数 handleStateChange0， 用 来 监测 HITP 状态 ， 如 果 整 个 通信 顺利 完成 ， 则 读 取 
xmlhttp 的 响应 文本 信息 。 | 
tunction handleStateChanege(){ | 
i{(xmlHttp.readyState == 4){ 
1{ (xmlHttp.status == 200 || xmlHttp.status 一 0){ 
alert(xmlhttp.response Text):; 
} 


} 


然后 ， 修 改 request0 图 数 ， 为 onreadystatechange 事件 注册 回调 消 数 。 
function request(url): 


* 321* 
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xmlHttp.open("GET", url, false): 
XmlHttp.onreadystatechange = handleStateChange: 
xmlHttp.send(null): 
EL 
上 面 代码 把 谈 取 啊 应 数据 的 脚本 放 在 handleStateChange0 函数 中 ， 然 后 通过 onreadystatechange 事件 来 
调用 。 


11.1.7 终止 请 求 


使 用 abort0 方法 可 以 终止 正在 进行 的 异步 请 求 。 在 使 用 abort0 方法 前 ， 应 先 清除 onreadystatechange 事 
件 处 理 函 数 ， 因 为 正 和 Mozilla 浏览 各 在 请 求 终 止 后 也 会 激活 这 个 事件 处 理 困 数 。 如 果 将 onreadystatechange 
属性 设置 为 null, 则 正 浏 览 需 会 发 生 异 第 ， 所 以 可 以 为 它 设 置 一 个 空 图 数 ， 代 人 码 如 下 : 


Xmlhttp.onreadystatechanpe = functlon(){ + 
Xmlhttp.abort(): 


11.1.8 获取 XML 数据 


XMLHttpRequest 对 象 通过 responseText、responseBody、responseStream 或 responseXML 属性 获取 啊 应 
信息 ， 说明 如 表 11.2 所 示 ， 它 们 都 是 只 读 属 性 。 


表 11.2 XMLHttpRequest 对 象 响应 信息 属性 


中 应 信息 说 明 

responseBody 将 啊 应 信息 正文 以 Unsigned Byte 数组 形式 返回 
responseStream 以 ADO Stream 对 象 的 形式 返回 啊 应 信息 
responseText 将 啊 应 信息 作为 字符 串 返 回 

responseXML 将 响应 信息 格式 化 为 XML 文档 格式 返回 


在 实际 应 用 中 ， 一 般 将 格式 设置 为 XML、HTML、JSON 或 其 他 纯 文 本 格式 。 具 体 使 用 哪 种 响应 格式 ， 
可 以 参考 下 面 儿 条 原则 。 

回 ”如 采 回 页面 中 添加 大 块 数据 ， 则 选择 HIML 格式 会 比较 方便 。 

加 ”如 果 和 需要 协作 开发 ， 且 项 目 庞 杂 ， 则 选择 XML 格式 会 更 通用 。 

回 ”如 条 要 检索 复杂 的 数据 ， 且 结构 复 茉 ， 则 选择 JSON 格式 比较 方便 。 

XML 是 使 用 最 广泛 的 数据 格式 。 因 为 XML 文档 可 以 被 很 多 编程 语言 文 持 ， 而 且 开 发 人 员 可 以 使 用 比 
较 熟 悉 的 DOM 模型 来 解析 数据 ， 其 缺点 在 于 服务 顺 的 啊 应 和 解析 XML 数据 的 脚本 可 能 变 得 相当 元 长 查 
找 数 据 时 不 得 不 遍历 每 个 节点 。 

【示例 1】 在 服务 顺 端 创建 一 个 简单 的 XML 文档 (XML server.xml )。 

<?2xml version="1.0" encodimg= "gb2312”) 

<the>XML 数据 </the > 


然后 在 客户 端 进行 如 下 请 求 (XML main.html )。 


i 
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var x = createXMLHTTPObjectO: // 创建 XMLHttpRequest 对 象 
Var Wl = "XML server.xml": 
x.open("GET", Url true): 
x.onreadystatechange = function (){ 
1{ (x.readyState == 4 && x.status — 200 ){ 
var nfo= x.responseXML.: 
alert(info.getElementsByTagName("the")[0].firstChild.data): // 返回 元 信息 字符 串 "XML 数据 " 


} 
} 
x.send(null): 


在 上 面 的 代码 中 使 用 XML DOM 提供 的 getElementsByTagName0 方法 获取 the 节点 ， 然 后 再 定位 第 一 

个 the 节点 的 子 节点 内 容 。 此 时 如 果 继 续 使 用 responseText 属性 来 读 取 数据 ， 则 会 返回 如 下 XML 源 代 码 字 | 
<?xml version="1.0" encodine="gb2312"7?> | 
<the>XML 数据 </the > 


【示例 2】 使 用 服务 右 端 脚本 生成 XML 文档 结构 。 例 如 ， 以 ASP 脚本 生成 上 面 的 服务 需 奖 响应 信息 。 
<?xml version="1.0" encodine="gb2312"7?> 

< 一 0%0 

Response.ContentType = "text/xml"” /定义 XML 文档 文本 类 型 ， 否则 正 浏览 器 将 不 识别 
Response.Write("<the>XML 数据 </the =") 

2%0> 


僵 ' 提示 : 对 于 XML 文档 数据 来 说 ， 第 一 行 必须 是 <?xml version="1.0" encoding="pgb2312"?>， 该 行 命令 | 
表示 输出 的 数据 为 XML 格式 文档 ， 同 时 标识 了 XML 文档 的 版 本 和 字符 编码 。 为 了 能 够 兼容 
IE 和 Firefox 等 浏览 器 ， 能 让 不 同 浏览 器 都 可 以 识别 XML 文档， 还 应 该 为 响应 信息 定义 XML 
文本 类 型 。 最 后 根据 XML 语法 规范 编写 文档 的 信息 结构 。 然 后 ， 使 用 上 面 的 示例 代码 请 求 该 
服务 器 端 脚本 文件 ， 同 样 能 够 显示 元 信息 字符 串 "XML 数据 "。 


11.1.9 获取 HTML 文本 


设计 啊 应 信息 为 HIML 字符 串 是 一 种 第 用 方法 ,这样 在 客户 端 就 可 以 直接 使 用 innerHTML 属性 把 获取 


的 字符 串 插入 网 页 中 。 
【示例 】 在 服务 需 端 设计 啊 应 信息 为 HIML 结构 代码 ( HTML server.html )。 
<table=> 


<tr><td>RegExp.exec0</td><td> 通用 的 匹配 模式 </td></tr> 
<tr><td>ReegExp.test0</td><td> 检测 一 个 字符 串 是 否 匹 配 某 个 模式 </td> 
= 
</table> 


然后 在 客户 端 来 接收 啊 应 信息 (HIML main.html )， 代 码 如 下 : 
dv 1d="grid"></dIv> 
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<script> 
tunction createXMLHTTPOb]JectO1 
/ 省略 
} 
var x = createXMLHTTPObjectO: 1/ 创建 XMLHttpRequest 对 象 
var url = "HIML server.html": 
x.open("GET", url, true): 
x.onreadystatechange = function (){ 
1{( XTeadystate — 4 && x.status =— 200 ){ 
Var 0= document.getElementByld("erid"): 
o.innerHTML = x.response Text: 1// 把 响应 数据 直接 插入 页 面 中 进行 显示 
} 
} 
x.send(null): 


</script> 


在 某 些 情 况 下 , HTML 字符 串 可 能 为 客户 端 解 析 啊 应 信息 节省 了 一 些 JavaScript 脚本 ,但 是 也 市 来 了 一 


些 问 题 。 
回 ” 啊 应 信息 中 包含 大 量 无 用 的 字符 ， 啊 应 数据 会 变 得 很 及 肿 。 因 为 HIML 标记 不 含有 信息 ， 


以 把 它们 放置 在 客户 端 由 JavaScript 脚本 负责 生成 。 


完全 可 


回 ” 啊 应 信息 中 包含 的 HIML 结构 无 法 有 效 利用 ， 对 于 JavaScript 脚本 来 说 ， 它 们 仅仅 是 一 堆 字 符 串 。 


同时 结构 和 信息 混合 在 一 起 ， 也 不 符合 标准 设计 原则 。 


11.1.10 ”获取 JavaScript 脚本 


可 以 设计 啊 应 信息 为 JavaScript 代码 ， 这 里 的 代码 与 JSON 数据 不 同 ， 它 是 可 执行 的 命令 或 脚本 。 


【示例 】 在 服务 器 端 请 求 文件 中 包含 下 面 一 个 困 数 (Code serverjs )。 


function(){ 
var d = new Date() 
retum d.toString(); 


} 


然后 在 客户 端 执行 下 面 的 请 求 。 


var x = createXMLHTTPObjectO: / 创建 XMLHttpRequest 对 象 
var Ul = "code SelVerI.1S”: 
x.open("GET", url, true): 
x.onreadystatechange = function (){ 
1f( x.readyState — 4 && x.status — 200 ) { 
var Info = xX.responseText: 
var 0==eval("("+info+t")" 十 "0": /调用 eval0 方法 把 JavaScript 字符 串 转 换 为 本 地 脚本 
alert(o): /返回 客户 端 当前 日 期 
} 


} 
x.send(null): 


在 转换 时 应 在 字符 串 前 后 附加 两 个 小 括号 : 一 个 是 包含 痕 数 结构 体 的 ， 一 个 是 表示 调用 函数 的 。 
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少 使 用 JavaScript 代码 作为 啊 应 信息 的 格式 ， 因 为 它 不 能 传递 更 丰富 的 信息 ， 同 时 JavaScript 脚本 极 易 引发 
安全 隐患 。 


11.1.11 获取 JSON 数据 


通过 XMLHttpRequest 对 象 的 responseText 属性 获取 返回 的 JSON 数据 字符 串 ， 然 后 可 以 使 用 eval0 方 
法 将 其 解析 为 本 地 JavaScript 对 象 ， 从 该 对 象 中 再 读 取 任何 想 要 的 信息 。 
【示例 】 将 返回 的 JSON 对 象 字 符 串 转换 为 本 地 对 象 ， 然 后 读 取 其 中 包含 的 属性 值 (JSON_main.html ): 


var x = createXMLHTTPObjectO: // 创建 XMLHttpRequest 对 象 
var Url = "JSON serverjs": 1/ 请求 的 服务 器 端 文件 
x.open("GET", Url true); 
x.onreadystatechanege = function (){ 
1 (x.readyState == 4 && x.status — 200 ){ 
Var info = x.response Text: /1/ 获取 啊 应 信息 
var 0 二 eval("(" 十 info 十 ")"):;// 调用 eval0 方法 把 JSON 字符 串 转 换 为 本 地 对 和 象 


alert(info): // 显示 响应 的 字符 串 ， 返 回 整 个 JSON 对 象 字符 串 
alert(o.name): // 读 取 对 象 属性 值 ， 返 回 字 符 串 "css8" 
上 
8 
x.send(null): 


在 转换 对 象 时 ， 应 该 在 JSON 对 象 字 符 串 外 面 附加 小 括号 运算 符 ， 表 示 调 用 对 象 的 意思 。 如 果 是 数组 ， 
则 可 以 这 样 读 取 ( JSON mainl .html ): 
x.onreadystatechanege = function (){ 
1 (x.readySstate == 4 && x.status 一 200 ){ 
Var mio = x.response Text: 
Var 0= eval(mto): 
alert(info): // 显示 响应 的 字符 串 ， 返 回 整 个 JSON 对 象 字 符 串 
alert(o[0].name); // 读 取 第 一 个 数组 元 素 值 的 属性 值 ， 返 回 字符 串 "css8" 


演 提示 : eval0 方法 在 解析 JSON 字符 串 时 存在 安全 隐患 。 如 果 JSON 字符 囊 中 包含 恶意 代码 ， 在 调用 
回调 函数 时 可 能 会 被 执行 。 
解决 方法 : 使 用 一 种 能 够 识别 有 效 JSON 语法 的 解析 程序 ， 当 解析 程序 一 旦 匹配 到 JSON 字 
符 事 中 包含 不 规范 的 对 得 ,会 直接 中 断 或 者 不 执行 其 中 的 恶意 代码 。 用 户 可 以 访问 http://Wwww 
json.org/json2.js 免费 下 载 JavaScript 版 本 的 解析 程序 。 不 过 如 果 确 信 所 响应 的 JSON 字符 串 是 安 
全 的 ， 没 有 被 人 恶意 攻击 ， 那 么 可 以 使 用 eval(0 方法 解析 JSON 字符 串 。 


11.1.12 ”获取 纯 文 本 


对 于 简短 的 信息 ， 有 必要 使 用 纯 文本 格式 进行 响应 。 但 是 纯 文本 信息 在 响应 时 很 容易 丢失 ， 且 没有 办 
法 检测 信息 的 完整 性 。 因 为 元 数据 都 以 数据 包 的 形式 进行 发 送 ， 不 容易 丢失 。 
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【示例 】 服 务 囊 器 啊 应 信息 为 字符 串 "true"， 则 可 以 在 客户 端 这 样 设计 。 


VaTX= CreateXMLHTTPOblectO: 
Var url = "Text server.txt": 
x.open("GET", url, true): 
x.onreadystatechange = function (){ 
1{( XTeadystate — 4 && x.status —— 200 ) 1{ 
| var mio= xX.responseText: 
ifinfo 一 "true") alert(" 文本 信息 传输 完整 "): / 检测 信息 是 否 完整 
else ”alert(" 文本 信息 可 能 存在 丢失 "): 


} 


x.send(null): 


11.1.13 ”获取 头 部 信息 


] 每 个 HTTP 请 求 和 啊 应 的 头 部 都 包含 一 组 消息 ， 对 于 开 发 人 员 来 说 ， 获 取 这 些 信息 具有 重要 的 参考 价 
值 。XMLHttpRequest 对 象 提供 了 两 个 方法 用 于 及 置 或 获取 头 部 信息 言 息 。 
困 getAll]ResponseHeaders0: 获取 响应 的 所 有 HTTP 头 信息 。 
回 ”getResponseHeader0: 从 啊 应 信息 中 获取 指定 的 HTTP 头 信息 。 
【示例 1】 获 取 HTTP 响应 的 所 有 头 部 信息 。 
VaTX= createXMLHTTPOb]ect(): 
Var Url = "server.txt" 
x.open("GET", url, true); 
x.onreadystatechange = function (){ 
1f( XTeadystate — 4 && x.status — 200 ) { 
alert(x.getAllResponseHeaders()): / 获取 头 部 信息 
} 


} 
x.send(null): 
【示例 2】 下 面 是 一 个 返回 的 头 部 信息 示例 ， 有 具体 到 不 同 的 环境 和 训 览 着 ， 返 回 的 信息 会 略 有 不 同 。 
X-Powered-By: ASPNET 
Content-Iype: text/plain 
ETag: "0b76f78d2b8c91:8e7" 
Content-Leneth: 2 
Last-Modified: Thu, 09 Apr 2017 05:17:26 GMT 
| 如 果 要 获取 指定 的 某 个 首部 消息 ， 可 以 使 用 getResponseHeader0 方法 ， 参 数 为 获取 首部 的 名 称 。 例 如 ， 
”获取 Content-Type 首部 的 值 ， 则 可 以 这 样 设计 。 
| alert(x.getResponseHeader("Content-Type")): 
除了 可 以 获取 这 些 头 部 信息 外 ， 还 可 以 使 用 setRequestHeader0 方法 在 发 送 请 求 中 设置 各 种 头 部 信息 。 


xInlHttp.setRequestHeader("name","css8"); 
xmlHttp.setRequestHeader("level"."2"): 


服务 强 端 就 可 以 接收 这 些 日 定义 头 部 信息 ， 并 根据 这 些 信息 提供 特殊 的 服务 或 功能 了 。 
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11.2 XMLHttpRequest 2.0 基础 


2014 年 11 月 ，W3C 正式 发 布 XMLHttpRequest Level 2 标准 规范 ， 新 增 了 很 多 实用 功能 ， 极 大 地 推动 


了 异步 交互 在 JavaScript 中 的 应 用 。 旧 版 本 的 XMLHttpRequest 插件 存在 很 多 缺陷 ， 简 单 说 明 如 下 : 


加 ”只 支持 文本 数据 的 传送 ,无 法 用 来 读 取 和 上 传 二 进 制 文件 。 
回 ”传送 和 接收 数据 时 ， 没 有 进度 信息 ， 只 能 提示 有 没有 完成 。 
回 受到 同 域 限 制 ， 只 能 向 同一 域名 的 服务 需 请 求 数据 。 
XMLHttpRequest 2 做 出 了 大 幅 改 进 ， 简 单 说 明 如 下 : 

可 以 设置 HTTP 请 求 的 时 限 。 

可 以 使 用 FormData 对 象 管理 表单 数据 。 

可 以 上 传 文件 。 

可 以 请 求 不 同 域名 下 的 数据 ( 里 域 请 求 )。 

可 以 获取 服务 器 端的 二 进 制 数据 。 

可 以 获得 数据 传输 的 进度 信息 。 


时 的 多 的 人 的 的 


11.2.1 ”请求 时 限 


XMLHttpRequest 2 为 XMLHttpRequest 对 象 新 增 timeout 属性 ， 使 用 该 属性 可 以 设置 HITP 请 求 时 限 。 
xhr.timeout = 3000: 

上 面 语句 将 异步 请 求 的 最 长 等 待 时 间 设 为 3000 毫秒。 超过 时 限 ， 就 自动 停止 HTTP 请 求 。 

与 之 配套 的 还 有 一 个 timeout 事件 ， 用 来 指定 回调 函数 。 


xhr.ontimeout = function(event){ 
alert( 请 求 超 时 ! 7): 
} 


11.2.2 FormData 数据 对 象 


XMLHttpRequest 2 新 增 FormData 对 象 ， 使 用 它 可 以 处 理 表单 数据 。 使 用 方法 如 下 : 
第 1 步 ， 新 建 FormData 对 和 名。 

Var formData = new FormData( ); 

第 2 步 ， 为 FormData 对 象 添加 表单 项 。 


formData.append('username', ' 张 三 站 ): 
tormData.append('1d', 123456): 


第 3 步 ， 直 接 传送 FormData 对 象 。 这 与 提交 网 页 表单 的 效果 完全 一 样 。 
xhr.send(tormData):; 


. 327 ， 


Js 俯 入门 到 精通 ( 币 课 精 编 县 


第 4 步 ，FormData 对 象 也 可 以 用 来 获取 网 页 表单 的 值 。 


Var form = document.getElementById( myform"): 

var formData = new FormData(form): 
formData.append('secret', '123456"); // 添加 一 个 表单 项 
xhr.open(POST', form.action): 

xhr.send(tormData): 


11.2.3 ”上传 文件 


新 版 XMLHttpRequest 对 象 不 仅 可 以 发 送 文本 信息 ， 还 可 以 上 传 文件 。XMLHttpRequest 的 send0 方法 
可 以 发 送 字 符 串 、Document 对 象 、 表 单数 据 、Blob 对 象 、 文 件 以 及 ArrayBuffer 对 象 。 
| 【示例 】 设 计 一 个 "选择 文件 "的 表单 元 素 ( input[type="file"] )， 将 它 装 人 FormData 对 和 象 。 
Var tormData = new FormData(): 
for (vari= 0;1< files.leneth:it+) { 
formData.append('‘files[|', files[1]): 
} 


然后 ， 发 送 FormData 对 象 给 服务 器 。 
Xhbrsend(tormnDatal): 


| 11.2.4 ” 跨 域 访问 


| 新 版 本 的 XMLHttpRequest 对 象 可 以 回 不 同 域名 的 服务 器 发 出 HITP 请 求 。 使 用 跨 域 资源 共享 的 前 提 
”是 : 浏览 右 必 须 支 持 这 个 功能 ， 且 服务 右 端 必须 同意 这 种 跨 域 。 如 采 能 够 满足 上 面 两 个 条 件 ， 则 代码 的 写法 
与 不 跨 域 的 请 求 完全 一 样 。 

xhr.open(GET", ‘http://other.server/and/path/to/script'): 


“11.2.5 响应 不 同类 型 数据 


新 版 本 的 XMLHttpRequest 对 象 新 增 responseType 和 response 属性 。 

加 ”responseType: 用 于 指定 服务 需 问 返回 数据 的 数据 类 型 ， 可 用 值 为 text、arraybuffer、blob 、json 或 
document。 如 果 将 属性 值 指定 为 空 字符 串 值 或 不 使 用 该 属性 ， 则 该 属性 值 默认 为 text。 

response: 如 果 回 服务 顺 端 提交 请 求 成 功 ， 则 返回 啊 应 的 数据 。 
> 如果 responseType 为 text， 则 response 返回 值 为 一 串 字 符 串 。 

如 果 responseType 为 arraybuffer， 则 response 返回 值 为 一 个 ArrayBuffer 对 象 。 

如 果 responseType 为 blob ， 则 response 返回 值 为 一 个 Blob 对 象 。 

如 果 responseType 为 json， 则 response 返回 值 为 一 个 JSON 对 象 。 

如 果 responseType 为 document， 则 response 返回 值 为 一 个 Document 对 象 。 


VY TY 
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11.2.6 ”接收 二 进 制 数据 


旧版 本 的 XMLHttpRequest 对 象 只 能 从 服务 右 接 收文 本 数据 ， 新 版 本 则 可 以 接收 二 进 制 数据 。 

使 用 新 增 的 responseType 属性 ， 可 以 从 服务 天 接收 二 进 制 数据 。 如 宁 服 务 佣 返回 文本 数据 ， 这 个 属性 
的 值 是 text， 这 是 默认 值 。 

回 可 以 把 responseType 设 为 blob， 表 示 服 务 顺 传 回 的 是 二 进 制 对 象 。 

Var Xhr = new XMLHttpRequest(); 

xhr.open( GET', "path/to/image.pne2'): 

xhr.responselype = blob': 


接收 数据 的 时 候 ， 用 浏览 器 自 带 的 Blob 对 象 即 可 。 
Var blob = new Blob([xhrresponse|, {type: "mage/pne'}): 


< 匀 注意 : 此 处 读 取 xhrresponse， 而 不 是 xhrresponseText。 


回 可 以 将 responseType 设 为 arraybuffer， 把 二 进 制 数据 装 在 一 个 数组 里 。 
Var xhr = new XMLHttpRequest(): 

xhr.open(GET', "path/to/image.pne'"): 

xhr.responselype = "arTraybufier : 


接收 数据 的 时 候 ， 需 要 遍历 这 个 数组 。 
var arrayButier = xhr.response: 
1f (arrayBuffer) { 
var byteAIrray = new Uimt8Array(arrayButter):; 
for (var 1= 0: 1< byteArray.byteLength: 1++) { 
/ 执行 代码 
} 


11.2.7 ”监测 数据 传输 进度 


新 版 本 的 XMLHttpRequest 对 象 新 增 一 个 progress 事件 ， 用 来 返回 进度 信息 。 它 分 成 上 传 和 下 载 两 种 情 
况 。 下 载 的 progress 事件 属于 XMLHttpRequest 对 象 ， 上 传 的 progress 事件 属于 XMLHttpRequest.upload 对 象 。 ， 
第 1 步 ， 先 定义 progress 事件 的 回调 函数 。 
xhr.onprogress = updateProgress: 
xhr.upload.onproeress = updateProgress; 


第 2 步 ， 在 回调 函数 里 面 使 用 这 个 事件 的 一 些 属 性 。 


function UpdateProgress(event) { 
1{ (event.lenethComputable) { 
Var percentComplete = event.loaded / event.total: 
} 
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上 面 的 代码 中 ，event.total 是 震 要 传输 的 总 字 节 ，eventloaded 是 已 经 传输 的 字 节 。 如 果 eventlengthComputable 


不 为 真 ， 则 event.total 等 于 0。 


与 progress 事件 相关 的 ， 还 有 其 他 五 个 事件 ， 可 以 分 别 指定 回调 函数 。 
回 1load: 传输 成 功 完成 。 

回 abort: 传输 被 用 户 取消 。 

回 error: 传输 中 出 现 错 误 。 

回 loadstart: 传输 开始 。 

回 loadend: 传输 结束 ， 但 是 不 知道 成 功 还 是 失败 。 


11.3 jQuery 实现 


下 面 结合 示例 介绍 在 jQuery 中 如 何 使 用 Ajax 技术 。 


11.3.1 使 用 GET 请 求 


jQuery 定义 了 get0 方法 ， 专 门 负责 通过 远程 HITP GET 请 求 方式 载 人 信息 。 该 方法 是 一 个 简单 的 GET 


请 求 功能 ， 以 取代 复 汪 的 $.ajax0 方法 。 用 法 如 下 : 


JQuery.get(url, [dataj, [calljbackj, [type]) 


get0 方法 包含 4 个 参数 ， 其 中 第 一 个 参数 为 必须 设置 的 参数 ， 后 面 3 个 参数 为 可 选 参数 。 

第 一 个 参数 表示 要 请 求 页 面 的 URL 地 址 。 

第 二 个 参数 表示 一 个 对 象 结构 的 名 / 值 对 列表 。 

第 三 个 参数 表示 异步 交互 成 功 之 后 调用 的 回调 函数 。 回 调 函 数 的 参数 值 为 服务 器 端 响应 的 信息 。 

第 四 个 参数 表示 服务 咒 疹 啊 应 信息 返回 的 内 容 格式 ， 如 XML、HIML 、Script、JSON 和 Text， 或 者 _default。 
【示例 1】 使 用 getO 方法 癌 服务 器 端 的 testl.asp 文件 发 出 一 个 请 求 ， 并 把 一 组 数据 传递 给 该 文件 ， 然 后 


在 回调 函数 中 读 取 并 显示 服务 需 端 啊 应 的 信息 。 


<ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<script src="]Jquery/Jquery-3.1.1.]s" type="text/Javascript"></script> 
<script type="text/Javascript" > 


$(function(){ 
$("input").click(finctionO{ / 儿 绑 定 click 事件 
$.get("test2.asp".{ // 回 test2.asp 文件 发 出 请 求 
name : "css8", / 发送 的 请 求 信息 
pass : 1234356, 
ape- | 
},function(data){ // 回调 函数 
alert(data): / 显示 响应 信息 
»); 
FE 
}) 
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</script> 

</head> 

<body>= 

<input type="button" value="jQuery 实现 的 异步 请 求 " 广 

</body> 

</html> 

get() 方法 能 够 在 请 求 成 功 时 调用 回调 师 数 。 如 果 需 要 在 出 错时 执行 旺 数 ， 则 必须 使 用 $.ajax0 方法 。 

可 以 把 get0 方法 的 第 二 个 参数 所 传递 的 数据 ， 以 查询 字符 串 的 形式 附加 在 第 一 个 参数 URL 后 面 。 例 
如 ， 针 对 上 面 的 get0 方法 用 法 ， 还 可 以 按 如 下 方式 编写 。 

$.get("testasp?name=css8&pass=123456&age=l" .function(data){ 1/ 回调 晴 数 

alert(data): // 显示 响应 信息 
}); 


jQuery 还 定义 了 两 个 专用 方法 : getJSONQO 和 getScript0。 这 两 个 方法 的 功能 和 用 法 与 get0 方法 是 完全 
相同 的 ， 不 过 getJSONO 方法 能 够 请 求 载 人 JSON 数据 ，getScript0 方法 能 够 请 求 载 人 JavaScript 文件 。 

这 两 个 方法 与 get0 方法 的 用 法 基本 相同 ， 但 是 仅 文 持 get0 方法 的 前 3 个 参数 ， 不 需要 设置 第 四 个 参 
数 ， 即 指定 啊 应 数据 的 类 型 ， 因 为 方法 本 身 已 经 说 明了 接收 的 信息 类 型 。 

【示例 2】 首 先 ， 在 服务 器 端 文件 (test2.asp ) 中 输入 下 面 的 响应 信息 。 


[ 
{name:"zhu",pass:"123456",age:"1"}., 
{name:"zhane",pass:"abcdef",age:"2"., 
{name:"zhao",pass:"opgrst",age:"3"} 

] 


上 面 信息 以 JSON 格式 进行 编写 ， 整 个 数据 包含 在 一 个 数组 中 ， 每 个 数组 元 素 是 一 个 对 象 ， 对 象 中 包 
含 3 个 属性 ， 分别 是 name、pass 和 age。 

然后 ， 在 客户 端的 jQuery 脚本 中 ， 使 用 getJSONO 方法 请 求 服务 天 端 文件 (test2.asp )， 并 把 啊 应 信息 
解析 为 数据 表格 形式 显示 ， 如 图 11.1 所 示 。 


<=script type="text/Javascript"> 
$(functionO { 
$("input").click(functionO { 
$.getJSON!("testl.asp",function(data){ // 使 用 getJSONO 方法 发 送 请 求 并 接收 JSON 格式 数据 
var data=data: /获取 啊 应 数据 


var str = "<table border=1 width=100%>": // 定义 字符 串 临时 变量 

号 人 十 二 中 < 

for(var name in data[0]){ 1/ 裔 历 响应 数据 中 的 第 一 个 数组 元 素 对 象 
str += "<th>" + name + "</th>"; 1/ 获取 并 显示 元 素 对 象 的 属性 名 


} 
Str += "</tr>": 
for(var 1=0: i1<data.leneth: 1+H+){ /这 历 啊 应 数据 中 数组 元 素 
str += "<tr>": 
for(var name in data[i){ 光明 历数 组 元 素 的 属性 成 员 
str += "<td>" + data[i]fname] +"</td>=":;/W/ 获取 并 显示 元 素 对 象 的 属性 值 
str += "</tr>": 
} 
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str += "<table>": 


| $("div").html(str): // 把 HTML 字符 串 嵌 入 div 元 素 中 显示 
| }); 
| 六 
加 
| </script> 
Note <input type='"button" value="jQuery 实现 的 异步 请 求 " 广 


| <div></div> 


Ee wl 二 http://localhost/mysite/test1.html 局- 国 避 | 是 test 


一 12346 | 本 


zhang labdf OO 
| 


图 11.1 使 用 geUSONO 方法 获取 并 解析 JSON 格式 数据 


<script type="text/Javascript"> 


| $(function(){ 

$("input").click(function(){ 

$.getJSON("testl.asp",function(data)t{ /使 用 getJSONO 方法 发 送 请 求 并 接收 JSON 格 
| // 式 数据 

| Var data=data: /获取 啊 应 数据 

| Var str = "<table border=] width=100%=": // 定义 字符 串 临 时 变量 

str += "<tr>": 

| for(var name in data[0]){ // 遍历 响应 数据 中 的 第 一 个 数组 元 素 对 象 
| str 十 = "<th>" + name + "</th>": 1 获取 并 显示 元 素 对 象 的 属性 名 

| } 

| str += "</tr>"; 

| for(var i=0: i<data.length: i++){ // 遍历 响应 数据 中 数组 元 素 

| str += "<tr>": 

| for(var name in data[i]){ // 遍历 数组 元 素 的 属性 成 员 

| str += "<td>" + data[i][name] + "</td>":; // 获取 并 显示 元 素 对 象 的 属性 值 

| | 

str += "</tr>"; 

| } 

str += "<table>"; 

| SC"div") html(str); /把 HTML 字符 串 相 入 到 div 元 素 中 显示 
| )); 

| }); 

| }) 

| </script> 

| <input type="button" value="jQuery 实现 的 异步 请 求 " 广 

| <div></div> 


l 使 用 getScript0 方法 能 够 异步 请 求 并 导入 外 部 JavaScript 文件 ， 上 有 具体 示例 此 处 不 再 演示 。 
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11.3.2 使 用 POST 请 求 


jQuery 定义 了 post0 方法 ， 专 门 负责 通 过 远程 HTTP POST 请 求 方 式 载 人 信息 。 该 方法 是 一 个 简单 的 
POST 请 求 功能 ， 以 取代 复杂 的 $.ajax0 方法 。 用 法 如 下 : 


JQuery.post(url, [datal. [callbackj, [typej) 


post0 方法 包含 4 个 参数 ， 与 get0 方法 相似 ， 其 中 第 一 个 参数 为 必须 设置 的 参数 ， 后 面 3 个 参数 为 可 

第 一 个 参数 表示 要 请 求 页 面 的 URL 地 址 。 

第 二 个 参数 表示 一 个 对 象 结构 的 名 / 值 对 列表 。 

第 三 个 参数 表示 异步 交互 成 功 之 后 调用 的 回调 图 数 。 回 调 函 数 的 参数 值 为 服务 器 端 啊 应 的 信息 。 

第 四 个 参数 表示 服务 顺 端 啊 应 信息 返回 的 内 容 格式 ， 如 XML 、HIML 、Script、JSON 和 Text， 或 者 _default。 

【示例 】 使 用 postO 方法 回 服务 需 端 的 test.asp 文件 发 出 一 个 请 求 ， 并 把 一 组 数据 传递 给 该 文件 ， 然 后 
在 回调 函数 中 读 取 并 显示 服务 器 端 响应 的 信息 。 | 


<ldoctype html> | 
<html> | 
<head> | 
<meta charset—"utf-8"> | 
<title>test</title> | 
<script src="]Jquery/Jquery-3.1.1.]s" type="text/Javascript"></script><script type="text/Javascript"> | 
$(functionOf | 
$("input").click(functionO{ / 绑 定 click 事件 | 
$.post("test.asp", { // 回 test.asp 文件 发 出 请 求 | 

name : "Css8", / 发 送 的 请 求 信息 

pass : 123456, | 

age :1 

} function(data){ / 回调 函数 

alert(data): // 显示 响应 信息 | 

| 

»): | 

1) | 
</script> 
<body> | 
<input type="button" value="jQuery 实现 的 异步 请 求 " 广 | 
| 


通过 上 面 示 例 可 以 看 到 post 方法 与 get0 方法 的 用 法 是 完全 相同 的 ， 数 据 传递 和 接收 响应 信息 的 方式 
都 相同 ， 唯 一 的 区 别 是 请 求 方式 不 同 。 具 体 选 用 哪个 方法 ， 主 要 根据 客户 端 所 要 传递 的 数据 容量 和 格式 而 
定 ， 同 时 应 该 考虑 服务 器 端 接收 数据 的 处 理 方式 。 | 
不 管 是 get0 方法 ， 还 是 post0 方法 ， 它 们 都 是 简单 的 请 求 方式 ， 对 于 特殊 的 数据 请 求 和 响应 处 理 , 应 
该 选择 $.ajax0 方法 ，ajax0 方法 的 参数 比较 多 且 复 杂 ， 能 够 处 理 各 类 特殊 的 异步 交互 行为 。 | 
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11.3.3 ”使 用 ajax() 请 求 


ajax( 方法 是 jQuery 实现 Ajax 的 底层 方法 。 也 就 是 说 ，ajax0 方法 是 get0 、post0 等 方法 的 基础 ， 使 用 
该 方法 可 以 完成 通过 HTTP 请 求 加 载 远程 数据 。 由 于 ajax0 方法 的 参数 较为 复杂 ， 在 没有 特殊 需求 时 ， 使 
用 高 级 方法 (如 getO0、post0O 等 ) 即 可 。 用 法 如 下 : 

JQuery.ajax(url,[settings]) 

ajax( 方法 只 有 一 个 参数 ， 即 一 个 列表 结构 的 对 象 ， 包 含 各 配置 及 回调 果 数 信息 。 

【示例 1】 加 载 JavaScript 文件 ， 可 以 使 用 下 面 的 参数 选项 。 


$.ajax({ 
type: CEL ， / 请 求 方 式 
url: "test.js", /请求 文 件 的 URL 
dataType: "script" 几 啊 应 的 数据 类 型 
让 
【示例 2】 如 果 把 客户 端的 数据 传递 给 服务 器 端 ， 并 获取 服务 器 的 啊 应 信息 ， 则 可 以 使 用 类 似 于 下 面 的 
| $.ajax({ 
| type: "POST., 1/ 请求 方式 
url: "test.asp", /请求 文 件 的 URL 
data: "nameJohn&location 一 Boston"， // 传递 给 服务 器 的 数据 
success: fnction(data){ / 异步 通信 成 功 后 的 回调 图 数 
alert(data): / 显示 服务 器 的 响应 信息 
} 
3 
【示例 3】 加 载 HTML 页 面 ， 可 以 使 用 下 面 的 参数 选项 。 
$.ajax({ 
url: "test.html", // 请求 文件 的 URL 
cache: false, /禁止 缓存 
success: function(html){ 1/ 异步 通信 和 成功 后 的 回调 函数 
$("#box").append(html): 1// 把 HTML 片段 附加 到 当前 文档 的 盒子 中 
} 
})); 


| 【示例 4】 如 果 和 希望 以 同步 方式 加 载 数据 ， 则 可 以 使 用 下 面 的 选项 设置 。 当 使 用 同步 方式 加 载 数 据 时 ， 
其 他 用 户 操作 将 被 锁定 。 
Var html = $.ajax({ 
ul: "test.asp", / 请求 文件 的 URL 
async: false // 同步 请 求 
1 


ajax0 方法 的 参数 选项 列表 如 表 11.3 所 示 。 
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表 11.3 ajax() 方法 的 参数 选项 列表 


参 数 | 数 据 类 型 说 有 明 
设置 是 否 异 步 请 求 。 默 认为 tue， 即 所 有 请 求 均 为 异步 请 求 。 如 果 需 要 发 送 同 步 请 求 ， 
async Boolean 设置 为 false 即 可 。 注 意 ， 同 步 请 求 将 锁 住 训 览 句 ， 用 户 其 他 操作 必须 等 待 请 求 完 成 
才 可 以 执行 
发 送 请 求 前 可 修改 XMLHttpRequest 对 象 的 图 数 ， 如 添加 上 自 定义 HTITP 头 。 
XMLHttpRequest 对 象 是 唯一 的 参数 。 该 图 数 如 果 返 回 false， 可 以 取消 本 次 Ajax 请 求 


| 人 设置 缓存 。 默 认 值 为 tue， 当 dataType 为 script 时 ， 默 认为 false。 设 置 为 false， 将 不 
cache oolean Ce nt 
会 从 浏览 器 缓存 中 加 载 请 求 信息 


请 求 完成 后 回调 函数 ( 请求 成 功 或 失败 时 均 调 用 ) 该 图 数 包 含 两 个 参数 : 
XMLHttpRequest 对 象 和 一 个 描述 成 功 请 求 类 型 的 字符 串 

contentType 发 送信 息 至 服务 器 时 内 容 编码 类 型 。 默 认为 application/x-www-form-urlencoded 

发 送 到 服务 器 的 数据 。 将 自动 转换 为 请 求 字 符 串 格式 ， 必 须 为 key/value 格式 。GET 
请 求 中 将 附加 在 URL 后 。 查 看 processData 选项 说 明 以 禁止 此 自动 转换 。 如 果 为 
数组 ， jQuery 将 自动 为 不 同 值 对 应 同一 个 名 称 。 如 {foo:["bar1", "bar2"]} 转换 为 
此 too=barl&ftoo=bar2， 


给 Ajax 返回 的 原始 数据 进行 预 处 理 的 函数 。 提 供 data 和 type 两 个 参数 : data 是 Ajax 


beforeSend Function 


complete Function 


sis Object、sString 


dataFilter 返回 的 厚 始 数 据 ，type 是 调用 jQuery.ajax 时 提供 的 dataType 人 参数。 因数 返回 的 值 将 
由 jQuery 进一步 处 理 
预期 服务 器 返回 的 数据 类 型 。 如 果 不 指定 ，jQuery 自动 根据 HITP 包含 的 MIME 信 
息 返 回 responseXML 或 TesponseText， 并 作为 回调 函数 参数 传递 ， 可 用 值 : 
加 ”xml: 返回 XML 文档， 可 用 jQuery 处 理 。 
回 ”html: 返回 纯 文本 HTML 信息 ; 包含 的 script 标签 会 在 插入 dom 时 执行 。 
加 ”script: 返回 纯 文 本 JavaScript 代码 。 不 会 自动 缓存 结果 。 除 非 设 置 了 cache 参数 。 
dataType 注意 : 在 远程 请 求 时 (不 在 同一 个 域 下 )， 所 有 POST 请 求 都 将 转 为 GET 请 求 


( 因为 将 使 用 DOM 的 script 标签 来 加 载 )。 
困 json: 返回 JSON 数据 。 
回 jsonp: JSONP 格式 。 使 用 JSONP 形式 调用 图 数 时 ， 如 "myurl?callback=?"， 
jQuery 将 上 自动 奉 换 为 正确 的 图 数 名 ， 以 执行 回调 困 数 。 
回 text: 返回 纯 文 本 字符 串 
请 求 失败 时 调用 上 数 。 该 图 数 包 售 3 个 参数 :XMLHttpRequest 对 象 、 错 误 信 息 ( 可 选 )、 
error Function 捕获 的 错误 对 象 。 如 果 发 生 了 错误 ,错误 信息 (第 二 个 参数 ) 除了 得 到 null 之 外 ， 还 
可 能 是 timeout、error、notmodified 和 parsererror 


lobal Boolean 是 否 触发 全 局 Ajax 事件 ， 默认 值 为 tue。 设 置 为 色 lse 将 不 会 触发 全 局 Ajax 事件 ， 如 
加 ajaxStart 或 ajaxStop 可 用 于 控制 不 同 的 Ajax 事件 


= n 仅 在 服务 器 数据 改变 时 获取 新 数据 ， 上 默认 值 为 false。 使 用 HITP 包含 的 Last-Modified 
1fModified Boolean 0 


在 一 个 jsonp 请 求 中 重 写 回 调 图 数 的 名 宇 。 这 个 值 用 来 蔡 代 在 "callback=?" 这 种 GET 


Jsonp 或 POST 请 求 中 URL 参数 里 的 callback 部 分 ， 比 如 {jsonp:'onJsonPLoad'" 会 导致 将 
"onJsonPLoad=?" 传 给 服务 器 
password String 用 于 响应 HTTP 访问 认证 请 求 的 密码 
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说 明 
发 送 的 数据 将 被 转换 为 对 象 (技术 上 讲 并 非 字 符 串 ) 以 配合 默认 内 容 类 型 application/ 
x- WWwW-form-urlencoded。 默 认 值 为 tue， 如 果 要 发 送 DOM 树 信息 或 其 他 不 希望 转换 
的 信息 ， 需 设置 为 false 
a wy. 只 有 当 请 求 时 dataType 为 jsonp 或 script， 并 且 type 是 GET 才 会 用 于 强制 修改 charset。 
ee 通常 在 本 地 和 远程 的 内 容 编码 不 同时 使 用 
有 ee 请 求 成 功 后 的 回调 了 滑 数 。 晴 数 的 参数 由 服务 占 返 回 ， 并 根据 dataType 参数 进行 处 理 后 
i 的 数据 ; 描述 状态 的 字符 操 

timeout 设置 请 求 超时 时 间 (毫秒 )。 此 设置 将 覆盖 全 局 设置 

ee 设置 请 求 方式 ， 如 POST 或 GET， 默 认为 GET。 其 他 HITP 请 求 方法 ， 如 PUT 和 
Ee a DELETE 也 可 以 使 用 ， 但 仅 部 分 浏览 器 文 持 
ul 发 送 请 求 的 地 址 ， 上 默认 为 当前 页 面 地 址 
username 用 于 啊 应 HITP 访问 认证 请 求 的 用 户 名 


a 一 需要 返回 一 个 XMLHttpRequest 对 象 。 默 认 在 正 下 是 ActiveXObject， 而 其 他 情况 下 
四 是 XMLHttpRequest。 用 于 重 写 或 者 提供 一 个 增强 的 XMLHttpRequest 对 象 


如 果 设 置 了 dataType 选项 ， 应 确保 服务 器 返回 正确 的 MIME 信息 ， 如 XML 返回 text/xml。 如 果 设 置 
dataType 为 script， 则 在 请 求 时 ， 如 果 请 求 文件 与 当前 文件 不 在 同一 个 域名 中 ， 所 有 POST 请 求 都 被 转换 为 
GET 请 求 ， 因 为 jQuery 将 使 用 DOM 的 script 标签 来 加 载 响应 信息 。 


11.3.4 ”跟踪 状态 


jQuery 在 XMLHttpRequest 对 象 定义 的 readyState 属性 基础 上 上， 对 异步 交互 中 服务 费 啊 应 状态 进行 封 沪 ， 
提供 了 6 个 啊 应 事件 ， 以 便于 进一步 细 化 对 整个 请 求 响应 过 程 的 跟踪 ， 说 明 如 表 11.4 所 示 。 
表 11.4 ”jQuery 封装 的 响应 状态 事件 
事件 说 明 


ajaxStart() Ajax 请 求 开始 时 进行 响应 
ajaxSend() Ajax 请 求 发 送 前 进行 啊 应 
ajaxComplete0 Ajax 请 求 完成 时 进行 响应 
ajaxSuccess() Ajax 请 求 成 功 时 进行 啊 应 
ajaxStopO Ajax 请 求 结 束 时 进行 响应 
ajaxEITOTU Ajax 请 求 发 生 错误 时 进行 响应 


请 求 和 啊 应 的 过 程 逐 步 提示 过 程 进展 。 首 先 ， 啊 应 的 是 ajaxSstart 和 ajaxSend 事件 ， 然 后 是 ajaxSuccess 事件 ， 
最 后 是 ajaxComplete 和 ajaxStop 事件 ， 如 图 11.2 所 示 。 如 果 请 求 失败 ， 则 中 间 会 啊 应 ajaxError 事件 。 
<ldoctype html> 
<html> 
<head> 


【示例 】 为 当前 异步 请 求 绑 定 6 个 jQuery 定义 的 Ajax 事件 ， 在 浏览 器 中 预览 ， 则 可 以 看 到 浏览 器 根据 
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<Imeta charset—"utf-8"> 
<title>test</title> 
<scrlpt src="Jquery/Jquery-1.3.2.]s" type="text/Javascript" ></script> | 
<script type="text/javascript" > | 
$(function(){ | 
$("input").click(function(O { | 
$.ajax({ 
me Be 
url: "test.asp", 
data: "name=—css8" 
1): 
$("div").ajaxStart(function() { 
alert("Ajax 请 求 开 始 "): 
}) | 
$("div").ajaxSend(function() { | 
alert("Ajax 请 求 将 要 发 送 "); 


1) | 
$("div").ajaxComplete(function(){ | 
alert("Ajax 请 求 完成 "): 
让 
$("div").ajaxSuccess(function(){ | 
alert("Ajax 请 求 成 功 ") | 
月 
$("div").ajaxStop(function(){ | 
alert("Ajax 请 求 结束 "): | 
}) | 
$("div").ajaxError(function(){ | 
alert("Ajax 请 求 发 生 错误 "): | 
}) | 
1): | 
月 | 
</script> | 
<style type="text/css"=> 
</style> 
</head> 
<body> 
<input type="button" value="jQuery 实现 的 异步 请 求 " 记 | 
<div></div> | 
</html> | 


这 
© Er 
jQuery 实现 的 异步 倍 求 


* J3/ * 


J 从 入 门 到 精通 ( 微 课 精 编 版 ) 


| 在 这 些 事件 中 大 部 分 都 会 包含 儿 个 默认 人 参数。 例如 ，ajaxSuccess、ajaxSend 和 ajaxComplete 都 包含 event、 
| request 和 settings， 其 中 event 表示 事件 类 型 ，request 表示 请 求 信息 ，settings 表示 设置 的 选项 信息 。 

/ ajaxError 事件 还 包含 4 个 默认 参数 : event、XMLHttpRequest、ajaxOptions 和 thrownError， 其 中 前 3 个 
参数 与 上 面 儿 个 事件 方法 的 参数 基本 相同 ， 最 后 一 个 参数 表示 抛 出 的 错误。 


11.3.5 载 入 文件 


| 
/ 遵循 Ajax 异步 交互 的 设计 原则 ，jQuery 定义 了 可 以 加 载 网 页 文档 的 load0 方法 。 该 方法 与 getScriptO 
”方法 的 功能 相似 ， 都 是 加 载 外 部 文件 ， 但 是 它们 的 用 法 完全 不 同 。load0 方法 能 够 把 加 载 的 网 页 文件 附加 到 
”指定 的 网 页 标签 中 。 

| 【示例 1】 新 建 一 个 简单 的 网 页 文件 (table.html )。 


| <l!doctype html> 
<html> 
| <head> 
<meta charset="utf-8"> 
</head> 
| <body> 
] <table width="100%" border="1"> 
| <tr> 
<th>name</th> <th>pass</th><th>age</th> 
</tr> 
<{r> 
<td>zhu</td> <td>123<td><td>1</td> 
| </t> 
| 3 
<td>zhane</td><td>456</td><td>2</td> 
</tr> 
<t> 
| <td>wang</td> <td>789</td><td>3</td> 
| </tr> 
| </table> 
</body> 
</html> 


然后 ， 在 男 一 个 页 面 中 输入 下 面 的 jQuery 脚本 。 


<ldoctype html> 

| <html> 

| <head> 

| <meta charset—"uti-8"> 

<title>test</title> 

<script src="Jquery/Jquery-1.11.0.]s" type="text/Javascript"></script> 
<script type="text/Javascript" > 


$(fnction() { 
| $("input").click(function(){ 
| $("div").load("table.html"): 
| 人 
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b 

</script> 

<style type="text/css"= 

</style> 

</head> 

<body> 

<input type="button" value="jQuery 实现 的 异步 请 求 " 廊 
<div></div> 

</html> 


这 样 当 在 浏览 器 中 预览 时 ， 单 击 “jQuery 实现 的 异步 请 求 ”按钮 ， 则 会 把 请 求 的 test.html 文件 中 的 数 
所 表格 加 载 到 当前 页 面 的 div 元 素 中 ， 如 图 11.3 所 示 。 


图 11.3 使 用 jQuery 的 load0 方法 载 人 外 部 文件 | 


使 用 ajax0 方法 可 以 替换 load0 方法 ， 因 为 load0 方法 是 以 ajax0 方法 作为 底层 来 实现 的 。 | 
【示例 2】 针 对 示例 1， 可 以 使 用 下 面 的 jQuery 代码 进行 蔡 换 。 | 


<ldoctype html> 
<html> 

<head> | 
<meta charset=—"utf-8"> 

<title>test</title> 

<script src="Jquery/Jquery-1.11.0.]s" type="text/Jjavascript"></script> 
<scrlpt type="text/Javascript" > 


$(fanctionO | 
$("input").click(functionO{ | 

Var str = ($.ajax({ /调用 ajax0 方法 ， 返 回 XMLHttpRequest 对 象 

Url : "table.html". / 载 人 的 URL 

async: false /禁止 异步 载 人 

1 让 -TesponseText: /获取 XMLHttpRequest 对 象 中 包含 的 服务 器 啊 应 信息 | 
$("div").html(str): / 将 载 人 的 网 页 内 容 附加 到 div 元 素 内 | 

}); / 

月 | 
</script> | 
<style type="text/css"> | 
</style> | 
</head> | 
<body> | 
<input type="button" value="jQuery 实现 的 异步 请 求 " 广 
<dv 一 dv> | 
</html> | 
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11.3.6 设置 Ajax 选项 


对 于 频繁 与 服务 器 进行 交互 的 页 面 来 说 ， 每 次 交互 都 要 设置 很 多 选项 ， 这 种 操作 是 很 烦琐 的 ， 也 容易 
出 错 。 为 此 ，jQuery 定义 了 ajaxSetup0 方法 ， 该 方法 可 以 预 设 异 步 交 互 中 通用 选项 ， 从 而 减轻 频繁 设置 选 

ajaxSetup0 方法 的 参数 仅 包含 一 个 参数 选项 的 列表 对 象 ， 这 与 ajax0 方法 的 参数 选项 设置 是 相同 的 。 在 
该 方法 中 设置 的 选项 ， 可 以 实现 全 局 共享 ， 从 而 在 具体 交互 中 只 需要 设置 个 性 化 参数 即 可 。 

【示例 】 先 使 用 $.ajaxSetup0 方法 把 本 页 面 中 异步 交互 的 公共 选项 进行 预 设 , 包括 请 求 的 服务 器 端 文件 、 
禁止 触发 全 局 Ajax 事件 、 请 求 方式 、 啊 应 数据 类 型 和 响应 成 功 之 后 的 回调 果 数 。 这 样 在 不 同 按钮 上 绑 定 异 
步 请 求 时 ， 只 要 设置 需要 发 送 请 求 的 信息 即 可 。 

在 服务 器 端的 请 求 文件 (testasp ) 中 输入 下 面 的 代码 。 

<oOLANGUAGE= "JAVASCRIPTI"” CODEPAGE= "65001"90> 

< 一 00 

var name = Request.Form("name"); 

Iname)t 

Response.Write(" 接收 到 请 求 信 息 : "+ name): 


else{ 
Response.Write(" 没有 接收 到 请 求 信息 ! "): 
} 


Yo> 


这 样 当 单 击 不 同 按 钮 时 ， 会 弹出 不 同 的 啊 应 信息 ， 这 些 信息 都 是 从 客户 端 接收 到 的 请 求 信 息 ， 如 
图 11.4 所 示 。 


<ldoctype html> 

<html> 

<head> 

<meta charset—"uti-8"> 

<title>test</title> 

<script src="Jquery/Jquery-1.11.0.s" type="text/Javascript"></script> 
<script type="text/Javascript" > 


$(finction(){ 
$.ajaxSetup( { 1/ 预 设 公共 选项 
url: "test.asp", 1/ 请 求 的 URL 
global: false, /禁止 触发 全 局 Ajax 事件 
type: "POST", 1 请 求 方式 
dataType: "text", 1/ 啊 应 数据 的 类 型 
success : function(data){ 1/ 啊 应 成 功 之 后 的 回调 函数 
alert(dataj: 
} 
I | 
$("input").eq(0).click(functionO { / 为 按钮 1 绑 定 异步 请 求 
$.ajax({ 
data : "name=zhu" / 发送 请 求 的 信息 
1); 
A 


$("input").eq(1).click(functionO{ / 为 按钮 2 绑 定 异步 请 求 
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$.ajax({ 
data : "name=wWangy 1 发送 请 求 的 信息 
PE 
i 
$("input").eq(2).click(functionO { // 为 按钮 3 绑 定 异步 请 求 
$.aJax({ 
data : "name=zhang" / 发 送 请 求 的 信息 
1 
}); 
Wn 
</script> 
<style type="text/css"> 
< style> 
</head> 
<body> 


<input type="button" value=" 异步 请 求 1" 廊 
<input type="button" value=" 异步 请 求 2" /> 
<input type="button'" value=" 异步 请 求 3" 广 
<div><J/div> 

</html> 


这 


BS | SS | Bie 


i 接受 到 请 法 信息 : wang 


图 11.4 ”ajaxSetup0 方法 预 设 异 步 交 互 的 公共 选项 


11.3.7 序列 化 字符 串 


在 Ajax 异步 通信 过 程 中 ， 客 户 端 所 发 送 的 请 求 字符 串 格式 必须 是 由 “&” 字 符 连 接 的 多 个 名 / 值 对 ， 
如 user-zhu&sex-man&grade-2。 而 当 使 用 表单 发 送 请 求 时 ， 发 送 请 求 的 信息 并 非 按 此 格式 进行 传递 。 用 户 
需要 手工 编写 发 送信 息 的 字符 串 格 式 ， 为 了 减轻 开发 人 员 不 必要 的 劳动 量 ， 特 意 定 义 了 serialize( 方法 ， 该 | 
方法 能 够 帮助 用 户 按 名 / 值 对 的 字符 串 格 式 快 速 整理 ， 并 返回 合法 的 请 求 字 符 串 。 
【示例 1】 在 下 面 这 个 复杂 表单 中 ， 用 户 需 要 传递 的 表单 值 是 比较 多 的 ， 如 果 一 项 一 项 获取 并 组 织 为 请 
<form action="#" method="post"> | 
姓名 : <input type="text" name="user" /><br /> 
性 别 : 


<input type="radio" name="sex" value="man" checked="checked" /> 出 


.341 。 


zy 以 入 门 到 精通 ( 币 课 精 纺 县 ) 


<input type="radio" name="sex" value="men" /> 女 <br /> 
年 级 : 
<select name="grade"> 

<option value="1"> 一 </option> 

<option value="2"> —. </option> 

<option value="3"> 二 </option> 
</select><br /> 
科目 : 
<select name="kemu" size="6" multiple="multiple"> 

<option value="yuwen"> 培 文 </option> 

<option value="shuxue"> 数学 </option> 

<option value="waiyu"> 外 语 </option> 

<option value="wuli"> 物理 </option> 

<option value="huaxue"> 化 学 </option> 

<option value='"jisuanji"> 计算 机 </option> 
</select><br /> 
兴趣 ， 
<input type="checkbox" name="love" value= "yundong'" /> 运动 
<input type="checkbox" name="love" value="Wenyi" /> 你 过 
<input type="checkbox" name="love" value="yinyue" /> 音乐 
<input type="checkbox" name="love" value="meishu" > 美术 
<input type="checkbox" name="love" value="youxi" > 游戏 <br /> 
<input type="submit" value=" 提交 " id="submit" /> 

</form> 


如 果 在 发 送 请 求 之 前 调用 serialize0 方法 ， 就 可 以 轻松 解决 合法 格式 的 请 求 字 符 串 的 设计 。 


<script type="text/Javascript"> 
$(function(){ 
$("#submit").click(function() { 
$("p")-html($("form").serializeO); /W 获取 和 格式 化 表单 的 请 求 字 符 串 信息 ， 并 显示 出 来 
return false: / 禁止 提交 表单 
月 : 


}) 
</script> 


在 浏览 锅 中 预览 ， 然 后 单 击 “提交 ”按钮 ， 可 以 看 到 规整 的 请 求 字 符 串 ， 如 图 11.5 所 示 。 


兴起 口 运 动 口 文艺 图 音乐 团 美 术 回 游 戏 


uscr—tcstfscx—=manteradc=3& kcmu=shuxvuctkemu=—wayutkcmu=wulitlove=ymyuctlove=mecishuRlove=youxl 


图 11.5 ” 预 处 理 请 求 的 字符 串 
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除了 serialize0) 方法 外 ，jQuery 还 定义 了 serializeArray0 方法 ， 该 方法 能 够 返回 指定 表单 域 值 的 JSON | 
结构 的 对 象 。 
< 注意 ; serializeArray0 方法 返回 的 是 JSON 对 象 ， 而 非 JSON 字符 串 。JSON 对 象 是 由 一 个 对 象 数 组 组 / 

成 的 ， 其 中 每 个 对 象 包 含 一 个 或 两 个 名 / 值 对 : name 参数 和 value 参数 (如果 value 不 为 空 )。 | 


【示例 2】 和 针对 上 面 的 表单 结构 ， 可 以 设计 如 下 jQuery 代码 ， 获 取 用 户 传 递 的 请 求 值 ， 并 把 这 个 JSON 
结构 的 对 象 解析 为 HIML 字符 串 显 示 出 来 ， 如 图 11.6 所 示 。 | 
<script type="text/Javascript"> | 
$(function(O{ 
$("#submit").click(function() { | 

//var array = $("form").serializeArray(): // 注意， 不 能 够 直接 在 form 元 素 上 调用 该 方法 | 

var array 二 $("input, select, :Tadiom.serializeArray0: ”// 在 表单 域 上 调用 serializeArray0 方法 ， 返 回 包含 传 

/ 递 表单 域 和 值 的 JSON 对 象 

var str = "| <br />" | 

for(var i = 0: i<array.length: i++){ // 遍历 数组 格式 的 JSON 对 象 | 

StTr 十 一 1 | 

for(var name in array[i]){ 1/ 遍历 数组 元 素 对 象 | 


str += Dame 十 ":" 十 array[il[namel 十 "”  /W 组 合 为 JSON 格式 字符 串 
} 
str = str.substring(0.str.length-1):; // 清除 最 后 一 个 字符 | 
str +=—"},<br />"- | 


} | 

str = strsubstring(0.strlength-7): / 清除 最 后 7 个 字符 | 

str += "<br />]"- | 
$("p").html(str): // 显示 返回 的 JSON 结构 字符 串 | 

return false: | 

上 | 

}) | 
</script> | 


器 | 
科目 ; | | 
兴趣 回 运 动 四 文艺 回音 乐 口 美 术 口 游戏 | 


inamenser,value:abe}, 
{name:sex,value:mant}, 
iname:pradc.valuc:3}, 
{name:kemu.value:shuxue!, | 
{name kemu.value-waryu}, I 
iname’kemu.value-wuli}, 

{name:love,value:yundone}. | 
{name:love,value:wenyi}, | 
{name:love,value:yimyue! 


图 11.6 ”把 请 求 的 值 转换 为 JSON 对 象 结构 _ 
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11.4 案例 实战 


本 节 示 例 以 Windows 操作 系统 +Apache 服务 器 + PHP 开发 语言 组 合 框架 为 基础 进行 演示 说 明 。 如 果 读 
者 的 本 地 系统 没有 搭建 PHP 虚拟 服务 器 ， 建 议 先 搭建 该 虚拟 环境 ， 再 详细 学 习 本 节 内 容 。 


11.4.1 设计 数据 瀑布 流 显 示 


经 党 可 以 看 到 一 些 网 站 没有 传统 的 分 页 符号 ， 看 完 一 页 鼠标 向 下 拉 时 ， 就 会 目 动 加 载 新 的 内 容 ， 避 免 
了 单 击 翻 页 按钮 的 麻烦 ， 可 以 一 下 浏览 到 底 ， 这 样 的 效 霖 用 jQuery 的 Ajax 可 以 轻松 实现 。 本 例 演示 如 何 实 
现 滚动 条 拖 动 时 加 载 新 的 内 容 ， 效 果 如 图 11.7 所 示 。 


A ~ [+)" 总 http:Wlocalhost/test/test.html 辣 谊 动 时 加 载 网 页 内 容 ¥ | 


图 11.7 瀑布 流 数据 显示 效果 


滚动 加 载 内 容 的 核心 是 关联 window 的 onscroll 事件 ， 这 个 事件 在 拖 动 滚动 条 时 和 触发。 在 这 个 事件 中 ， 
判断 当前 滚动 条 的 位 置 ， 如 果 滚 动 条 的 高 度 大 过 当前 文档 的 高 度 ， 则 向 服务 器 端 发 送 数据 请 求 。 

为 了 简化 设计 ， 本 例 在 HIML 页 面 上 放 了 一 些 简 单 的 文字 内 容 ， 在 JavaScript 中 定义 了 如 下 代码 ， 以 
实现 滚动 时 加 载 内 容 。 


$(document).ready(function() { 
$( 州 oaded max").val(50); /为 隐藏 域 赋值 S50， 表示 一 次 加 载 50 条 记录 
}); 
var loading = false: // 全 局 变量 ,指定 当 前 是 否 正 在 加 载 服务 器 端 内 容 
$(window).scroll(function() { // 关联 window 的 onscroll 事件 
// 如 果 当 前 窗 体 的 高 度 大 于 文档 的 高 度 
1f((($(Wwindow).scrollTop(}+$(window).height())+250)==$(document).height()){ 
lif(loadme 一 false)! 
loading = true: 1/ 则 设置 文档 加 载 状态 
$( 州 oadingbar).css("display","block: ”// 显示 加 载 提示 条 
// 调用 $.get， 向 服务 器 请 求 记录 ，start 参数 表示 起 始 编 号 
$.get( "alaxXScroll Server.php?start="+$('#loaded max').val(). function(loaded){ 
$Cbody').append(loaded): /加 载 返回 的 服务 器 内 容 
/ 在 隐藏 域 中 设置 新 的 起 始 值 
$('#loaded max').val(parseInt($('#loaded max').val(O)+30): 
$(' 夫 0adingbar").css("display","none"); // 隐藏 状态 条 的 显示 
loading = false: /结束 加 载 的 状态 
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id 为 loaded_max 的 元 素 是 一 个 HTML 隐藏 域 ， 用 来 保存 当前 已 经 加 载 的 最 大 记录 编号 。loading 全 局 
变量 用 来 保存 当前 是 否 处 于 加 载 状态 ， 可 以 看 作 一 个 标记 变量 。 然 后 ,定义 window 的 onscroll 事件 ， 判 断 
当前 滚动 的 位 置 是 否 大 于 当前 文档 的 高 度 ， 如 果 条 件 成 立 ， 将 loading 标记 位 设置 为 tue， 然 后 显示 加 载 中 
的 进度 条 。 调 用 $.get0 函数 ， 异 步 同 ajaxScroll_Serverphp 文件 请 求 数 据 ， 传 递 一 个 参数 start 表示 起 始 记录 
号 。 在 加 载 完 成 的 回调 函数 中 ， 将 服务 带 端 返回 的 内 容 加 载 到 body 中 ， 并 且 重 置 隐藏 域 中 的 值 ， 以 及 隐藏 
状态 条 的 显示 ， 最 后 将 loading 重 置 为 false。 

ajaxScroll Serverphp 文件 回 客 户 端 返回 一 些 固定 的 数据 ， 代 码 如 下 : 

=<?2php 

header("Content-Type: text/html: charset=UTF-8"):;” WUTF8 编码 

$maxval=1: / 定义 起 始 值 变量 

if (1sset($ GET| Start |)){ 

$maxval=$ GET['start]: 1/ 获取 起 始 值 

本 

while($i<=50)f / 循环 向 客户 端 输出 数据 

echo " 行 数 #".$maxval."<br/>": 
Wil 
$maxvalt+:; 


} 


> 


本 例 将 循环 返回 50 条 记录 ， 客 户 端 会 将 50 条 记录 追加 到 body 区 域 。 当 滚动 条 滚动 到 页 面 底部 时 ， 将 
显示 加 载 指示 条 ， 从 服务 器 端 异 步 加 载 记录 ， 加 载 完 成 后 ， 显 示 记 录 。 


11.4.2 ”无 刷新 删除 记录 


无 刷新 删除 是 目前 使 用 非常 频繁 的 一 种 Ajax 应 用 ， 它 可 以 让 用 户 无 刷新 地 删除 一 条 服务 器 端的 记录 ， 
就 好 像 是 删除 客户 端 本 地 的 一 条 记录 一 样 。 在 目前 的 留言 本 、 论 坛 、 微 博 等 应 用 中 ， 基 本 都 是 用 无 刷新 的 
记录 删除 方式 。 本 例 创 建 一 个 简单 的 留言 显示 页 ， 给 出 一 个 图 标 允 许 用 户 单 击 图 标 ， 使 用 Ajax 方式 异步 地 
从 服务 器 问 删 除 选 定 的 记录 ， 如 图 11.8 所 示 。 


留言 内 容 
单 击 可 以 败 际 一 条 注释 


斐 三 
很 好 用 的 留言 本 
F0013 


李 四 
这 是 使 用 je 于 现 的 肥 共 删 | 咏 功能 
301F.04-13 


起 六 
这 个 功能 直 的 很 直 错 
320150441 


图 11.8 无 刷新 删除 记录 
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首先 ， 设 计 留 言 结 构 。 其 中 一 条 留言 的 HIML 结构 代码 如 下 : 


<h3> 留言 内 容 </h3> 
<div 1d="load" alilen=—"center"> 

<!-- 删除 时 显示 的 异步 加 载 进度 条 --> 

<Imeg src="images/loading.alf” width="28" height="28" allen="absmiddle"> Loading...</dIv> 
单 击 x 可 以 删除 一 条 注释 <br><br> 
<d1v class="box"= 

<div class="text"><span> 张 三 </span><br> 很 好 用 的 留言 本 

<dlv class="date">2018-02-13</dIv=> 


</div> 
<!-- 删除 链接 ， 每 个 链接 的 衣 值 ， 指 回 数据 库 中 当前 的 记录 id--> 
<a href—="#" 1d="]1" class="delete"~>xX</a> 
<div class="clear"></div> 
</div> 


留言 页面 包含 一 个 删除 时 异步 加 载 的 进度 图 片 ， 以 及 耕 干 条 class 为 box 的 div 元 素 ， 每 条 div 中 包含 
尔 A 留言 内 容 和 日 期 。 
| 每 条 留言 的 删除 链接 都 包含 了 一 个 衣 值 ， 这 个 id 值 应 该 是 指 回 数据 库 中 该 条 留言 的 数据 库 id， 以 便 进 
| 行 数据 序 的 删除 。 出 于 简化 的 目的 ， 本 例 使 用 了 固定 的 id 编码 ， 编 写 如 下 的 jQuery 代码 来 实现 异步 无 刷新 


”地 删除 。 
| $(document).ready(function() { 
$(#load).hide(); / 隐藏 加 载 图 片 ， 只 在 需要 时 显示 
}); 
$(function() + 
$(".delete").click(function() { // 当 删 除 按钮 被 单 击 时 
$(#10ad'").fadeIn(): /淡出 显示 加 载 图 片 
var commentContainer = $(this).parentO: // 得 到 当前 链接 所 在 的 容 需 div 
var id = $(this).attr("id"): 1/ 得 到 当前 链接 的 id 值 
Var string = id='+ id : /构建 参数 字符 串 
$.ajax({ /调用 $.ajax0 发 送 异 步 Ajax 请 求 
type: "POST", /指定 提交 方式 为 POST 
url: "ajax delete Server.php", / 服务 器 端的 URL 
data: string. / 传递 的 参数 字符 串 
cache: false, / 不 缓存 
success: fanctionO{ /成 功 删除 后 ， 移 除 留言 记录 
commentContainer.slideUp('slow', function() {$(this).remove():;}): 
$(#l0ad').fadeOutO; / 隐藏 显示 加 载 图 标 
} 
}); 
return false: 
Pr 
Da 


在 页 面 缓存 事件 中 ,首先 隐藏 了 加 载 图 标的 显示 ， 这 个 图 标 只 在 删除 异步 提交 时 才 有 用 。 所 有 的 删除 
”链接 关联 了 click 事件 处 理 代码 ， 它 首先 显示 加 载 进度 图 标 ， 然 后 获取 当前 被 单 击 留言 的 div 实例 ， 以 及 当 
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前 链接 的 1d 值 。 以 当前 的 链接 id 值 作为 参数 ， 调 用 $.ajax0， 回 ajax_delete_ Serverphp 文件 发 送 一 个 Ajax | 
请 求 ， 用 来 删除 留言 。 删 除 留言 之 后 ， 删 除 留言 div， 并 且 淡 出 加 载 图 标的 显示 。 


11.3 三 线 练 习 


限于 篇 幅 ，11.4 节 演 示 了 两 个 比较 典型 的 应 用 案例 。 当 然 ，Ajax 在 Web 开发 中 占据 重要 
的 位 置 ， 所 以 读者 还 需要 加 强 练习 ， 为 此 本 节 提 供 多 个 示例 方 使 上 机 操作 ， 请 扫 色 阅读 。 
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第 7/ 2 章 


jQuery 工具 


( 襄 4 视频 讲解 . 1 小 时 S3 分 钟 ) 


jQuery 定义 了 很 多 人 静态 函数 ， 这 些 函 数 的 命名 空间 为 8$， 作 为 辅助 工具 主要 用 于 完 
成 特殊 任务 。 本 章 将 重点 介绍 这 些 辅 助 工具 的 使 用 。 


【学 习 重 点 】 

| 使 用 ]Query 检测 工具 。 

by 管理 ]Query 库 。 

| 就 练 使 用 JavaScript 扩展 方法 。 
| 正确 使 用 缓存 、 队 列 对 象 。 

| 正确 使 用 延迟 和 回调 函数 对 象 。 


第 ]2 章 jQuery 工具 SS 


12.] 浏览 器 探测 


jQuery 是 基于 跨 浏览 器 的 技术 框架 ， 开 发 人 员 不 必 为 了 兼容 不 同 浏览 器 而 烦恼 。 另 外 ，jQuery 也 定义 
了 几 个 直接 检测 浏览 器 相关 信息 的 工具 函数 ， 使 用 它们 可 以 快速 确定 用 户 端 浏 览 器 的 相关 信息 。 


12.1.1 ”检测 类 型 


检测 浏览 器 的 类 型 主要 根据 navigator 对 象 的 userAgent 属性 来 实现 ， 即 通过 引用 window 对 象 的 navigator 
属性 来 读 取 。 用 法 如 下 : 


Var browser = navigator.userA gent: 


jQuery 早期 版 本 定义 了 browser 对 象 ， 通 过 该 对 象 可 以 获取 当前 浏 览 器 的 类 型 ， 浏览 器 对 象 检测 技术 与 
此 属性 共同 使 用 可 提供 可 靠 的 浏览 间 检 测 支 持 。 


< 匀 注意 ; 在 新 版 本 中 ， 不 建议 用 户 使 用 browser 对 象 来 检测 浏览 器 类 型 。 


【示例 1] 确定 当前 浏览 器 的 类 型 。 通 过 遍历 browser 对 象 属性 ， 获 取 每 个 属性 值 ， 并 确定 当前 浏览 旨 
的 类 型 ， 演 示 效 果 如 图 12.1 所 示 。 


<ldoctype html> 

<html> 

<head> 

<Imeta charset=—"utf-8"> 

<title>test</title> 

<script src="]Jquery/Jquery-1.3.2.]s" type="text/Javascript"></script> 
<scrlpt type="text/Javascript"> 


$(function() { 
Var browser = $.browser: 
Var temp 三 一 


for(var name In DrOwWseT){ 
if(browser[name| — true) 
temp += name + " =" + browser[name] +"，<strong> 当前 浏览 右 是 "+name +" </strong><br />"; 
else 
temp += name + "= "+ browser[name| + "<br />"; 


} 
$("div").html(temp) 
月 
</script> 
<style type="text/css"=> 
</style> 
<body> 
<div></div> 
</body> 
</html> 
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Ee 一 党 http://localhost/m 户 = 呈 避 | 登 test 
version = 10.0 
safarl = false 


opera = false 
msie 一 true， 当 前 浏览 器 是 msie 


mozilla = false 


图 12.1 获取 浏览 絮 的 类 型 


通过 上 面 示 例 可 以 看 到 ，browser 对 象 包含 5 个 属性 ， 其 中 用 来 检测 训 览 带 类 型 的 属性 名 分 别 为 safari、 


opera、msie 和 mozilla。 用 户 可 以 直接 调用 这 些 属 性 来 检测 当前 浏 览 硕 是 否 为 特定 类 型 浏 
DOM 树 加 载 完成 前 即 有 效 ， 因 此 可 用 于 为 特定 浏览 右 设 置 ready 事件 。 


览 右 。 这 些 属性 在 


【示例 2】 下 面 代码 可 以 分 别 为 不 同 浏览 硕 编 写 不 同 的 页 面 初始 化 配置 函数 。 访 问 方 式 可 以 通过 点 号 运 


算 符 直接 调用 属性 ， 也 可 以 作为 名 称 下 标 进行 访问 。 
<script type="text/Javascript"> 
if($.browser.msie)t{ 
$(function() { 
alert("IE 浏览 器 专用 页 面 初始 化 图 数 ! "): 
1) 
上 
else if($.browser.safari){ 
$(function() { 
alert("Safari 浏览 器 专用 页 面 初始 化 函数 ! "); 
加 
else 1f($.browser|"opera" |){ 
$(function() { 
alert("Opera 浏览 器 专用 页 面 初始 化 限 数 ! "); 
加 
} 
else if($.browser["mozilla" |){ 
$(function() { 
alert("Firefox 浏览 器 专用 页 面 初始 化 函数 ! "):; 
}) 
|; 
</script> 


由 于 这 种 检测 浏览 融 的 方式 缺乏 灵活 性 , 与 jQuery 技术 框架 的 灵巧 性 相 违 背 ， 在 jQuery 1.3 中 不 建议 


使 用 。 当 然 ， 调 用 该 对 象 是 有 效 的 。 


12.1.2 ”检测 版 本 号 


在 早期 jQuery 中 可 以 借助 jQuery.browser.version 属性 获取 浏览 器 的 版 本 号 。 
【示例 】 下 面 代码 可 以 返回 当前 浏览 器 的 版 本 号 ， 返 回 值 是 字符 串 类 型 。 
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<script type="text/Javascript"> 
$(function(O { 

alert( $.browser.version ): 
}) 
</script> 


12.1.3 ”检测 浑 染 方式 


浏览 旭 为 了 实现 对 标准 网 员 和 传统 网 页 的 兼容 ,分 别 制订 了 几 套 网 页 显示 方案 ， 这 些 方案 就 是 浏览 带 
的 演 染 方式 。 浏 览 大 能 够 根据 网 页 文档 类 型 来 决定 选择 哪 套 显 示 模 式 对 网 页 进行 解析 。 
回 正 浏 览 带 支持 两 种 显示 模式 : 标准 模式 和 怪异 模式 。 在 标准 模式 中 ， 浏 览 右 会 根据 W3C 制定 的 标 
准 来 显示 页 面 ; 而 在 怪异 模式 中 ， 页 面 将 以 正 5 浏览 项 显示 页 面 的 方式 来 呈现 网 页 ， 以 保证 与 过 
去 非 标准 网 页 的 兼容 。 
回 Firefox 浏览 器 支持 三 种 显示 模式 : 标准 模式 、 几 乎 标准 的 模式 和 怪异 模式 。 其 中 几乎 标准 的 模式 
对 应 于 正 浏 览 硕 和 Opera 浏览 硕 的 标准 模式 ， 该 模式 除了 在 处 理 表格 的 方式 方面 有 一 些 细微 差异 
外 ， 与 标准 模式 基本 相同 。 
回 “Opera 浏览 器 支持 与 正 浏览 器 相同 的 显示 模式 。 但 是 在 Opera 9 浏览 器 版 本 中 怪异 模式 不 再 兼容 
IE 5 盒 模型 解析 方式 。 
通过 调用 jQuery.boxModel 属性 可 以 确定 浏览 着 在 解析 当前 文档 时 是 否 文 持 W3C 标准 的 盒 模 型 。 如 来 
返回 值 为 tue， 则 表示 支持 ; 否则 表示 不 支持 ， 即 支持 正 浏览 带 的 怪异 模式 。 
【示例 】 下 面 代 人 码 可 以 感性 认识 该 属性 的 应 用 。 
<script type="text/Javascript"> 
$(functionO{ 
alert( $.boxModel && " 支持 W3C 标准 盒 模型 "|" 支持 正 的 怪异 解析 模式 " ): 
J 
在 jQuery 1.3- 中 不 建议 使 用 jQuery.boxModel 属性 ， 如 采 要 检测 当前 页 面 中 浏览 硕 是 否 使 用 标准 盒 模型 
演 染 页 面 ， 建 议 使 用 jQuery.support.boxModel 属性 来 代替 。 


12.1.4 绽 合 汕 试 


从 1.3 版 本 开始 ，jQuery 重新 设计 了 浏览 副 特 性 检测 方法 ， 把 所 有 相关 属性 都 集中 到 support 对 象 中 ， 
这 样 可 方便 管理 和 使 用 。 在 support 对 象 中 ,很 多 属性 是 很 低级 的 ， 所 以 很 难 确保 在 日 后 版 本 升级 中 总 是 保 
持 有 效 ， 但 这 些 功能 主要 用 于 插件 和 内 核 开 发 者 。 

support 对 象 包含 的 属性 及 其 测试 内 容 说 明 如 表 12.1 所 示 。 

表 12.1 support 对 象 包含 的 属性 的 说 明 
属 性 说 明 


如 果 浏 览 玫 解 析 当 前 文档 是 以 W3C CSS 盒 模型 来 演 当 的， 则 返回 tme。 如 果 在 正 6 和 正 7 


boxModel ea 下 
En 的 怪异 模式 中 返回 flse， 则 在 页 面 初始 化 之 前 返回 pull 
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属 性 


cssFloat 


hrefNormalized 


htmlSerialize 


leadine Whitespace 


noCloneEvent 


objectAll 


opacity 


scriptEval 


style 


tbody 


zy 以 入 门 到 精通 ( 柚 课 精 编 且 ) 


说 明 
如 果 浏 览 需 使 用 cssFloat 属性 来 访问 CSS 的 Hoat 样式 值 ， 则 返回 tue， 和 否则 返回 false。 在 
IE 浏览 需 中 会 返回 false， 因 为 它 使 用 styleFloat 属性 来 访问 CSS 的 float 样式 值 
如 果 浏 览 器 从 getAttribute("href") 返回 的 是 原封 不 动 的 结果 ， 则 返回 tue， 和 否则 返回 false。 
在 正 浏 览 器 中 会 返回 flse， 因 为 它 对 返回 的 结果 进行 了 格式 化 处 理 
如 果 浏 览 器 通过 innerHTML 插入 a 元素 ,会 自动 序列 化 这 些 超 链接 ， 则 返回 tue， 和 否则 返 
回 包 lse。 目 前 在 正 浏览 器 中 会 返回 false 
如 果 浏 览 吉 在 使 用 innerHTML 时 保持 前 导 空 白字 符 ， 则 返回 tue， 和 否则 返回 false。 目 前 在 
IE 6 一 下 8 版 本 浏 贤人 名 中 会 运 回 false 
如 果 浏 览 喜 在 克隆 元 素 时 不 会 连同 事件 处 理 图 数 一 起 复制 ， 则 返回 tte， 目前 在 正 浏 览 紫 
中 返回 false 
如 果 在 某 个 元 素 对 象 上 执行 getElementsByTagName("*") 会 返回 所 有 子孙 元 素 ， 则 为 tue， 
目前 在 正 7 浏览 器 中 为 false 
如 果 浏 览 吉 能 适当 解释 透明 度 样式 属性 ， 则 返回 tme， 由 于 正 浏 览 需 使 用 alpha 滤 镜 实现 ， 
因此 返回 false 
使 用 appendChild0 或 createTextNode0 方法 搬入 脚本 代码 时 ， 浏 览 顺 是 否 执行 脚本 ， 目 前 在 
IE 浏览 器 中 不 能 够 执行 ， 因 此 返回 false, 正 浏览 器 使 用 text0 方法 插入 脚本 代码 可 以 执行 
如 果 getAttribute("style") 返回 元 素 的 行内 样式 ， 则 为 tue。 由 于 正 训 览 需 使 用 cssText 返回 
元 素 的 行内 样式 ， 因 此 返回 false 
如 果 训 览 器 允许 table 元 素 不 包含 tbody 元 素 ， 则 返回 tme。 目 前 在 正 浏 览 器 中 会 返回 
false， 它 会 自动 插入 缺失 的 tbody 元 素 


所 有 这 些 支 持 的 属性 值 都 通过 特性 检测 来 实现 ， 而 不 适用 任何 浏览 如 检测 。 


12.2 jQuery 管理 


jQuery 定义 $ 符号 代表 jQuery 对 象 ， 而 Prototype 也 引用 了 $ 名 字 空 间 。 如 果 把 它们 都 导入 同一 个 文档 
中 ， 可 能 会 引发 名 字 空 间 的 混乱 。 为 此 ，jQuery 提供 了 多 库 共存 的 技术 解决 途径 。 


12.2.1 有 磋 容 其 他 库 


jQuery 定义 了 noConflict0 函数 工具 ， 调 用 该 工具 可 以 把 变量 $ 的 控制 权 交 给 第 一 次 实现 它 的 库 或 者 


代码 。 


【示例 1】 为 了 方便 理解 ， 先 看 下 面 这 个 示例 。 


<script type="text/Javascript"> 


var $ = function(O{ 


alert(" 其 他 库 别 名 "): 


II 
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} 
</script> 
<script src="Jquery/Jquery-3.1.1.1s" type="text/Javascript"></script> 
<script type="text/Javascript"=> 
$(function(O{ 
alert("jQuery 库 别名 "); 
- 


</script> 


在 这 个 示例 中 ， 先 于 jQuery 库 之 前 命名 一 个 $ 变量 ， 为 该 变量 定义 一 个 简单 的 函数 。 然 后 导入 jQuery 
库 ， 再 调用 $0 函数 ， 则 可 以 看 到 浏览 器 根据 最 后 导入 的 jQuery 库 的 名 字 空 间 来 执行 $0 函数 ， 如 图 12.2 
所 示 。 

如 果 和 希望 执行 jQuery 库 前 面 的 $0 或 者 其 他 库 的 名 字 空 间 中 的 $0 函数 ， 则 只 需要 在 导 人 人 jQuery 库 后 
的 脚本 中 调用 jQuerynoConflictO 函数 即 可 。 

【示例 2】 针 对 示例 1， 可 以 按 如 下 方法 来 设计 ， 则 在 浏览 器 中 浏览 时 ， 可 以 看 到 最 先 定 义 的 $0 函数 有 
效 ， 如 图 12.3 所 示 。 


<script type="text/Javascript"> 
var $ = function(){ 
alert(" 其 他 库 别 名 "); 
} 
</script> 
<script src="Jquery/Jquery-3.1.1.]s" type="text/Javascript"></script> 
<script type="text/Javascript"> 
jQuerynoConflict0: /恢复 最 先 定义 的 $ 名 字 空 间 
$(function(){ 
alert("jQuery 库 别 名 "); 
"| 
</script> 


SS ES htpy/localhosym P ~ Bo test 


图 12.2 ”最 后 导 和 人 的 库 覆 盖 前 面 的 库 图 12.3 ”最 先导 人 的 库 覆 盖 后 面 的 库 
通过 这 种 方式 可 以 确保 jQuery 不 会 与 其 他 库 的 $ 对 象 发 生 冲 突 ， 在 运行 jQuery.noConflict0 函数 之 后 ， 
就 只 能 使 用 jQuery 变量 访问 jQuery 对 象 。 例 如 ， 当 需要 用 到 $0 的 地 方 ， 就 必须 换 成 jQueryO。 
noConflict( 负数 必须 在 导入 jQuery 库 之 后 ， 并 且 在 导入 男 一 个 导致 冲突 的 库 之 前 使 用 。 当 然 ， 也 应 当 
在 其 他 冲突 的 库 被 使 用 之 前 ， 除 非 jQuery 是 最 后 一 个 导 人 的 。 
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分 析 noConflict0 函数 的 源 代码 ， 可 以 看 到 noConflict0 函数 实际 上 是 把 备份 的 $ 变量 进行 恢复 ， 恢 复 到 
最 初 的 状态 。 
noContlict: function( deep ) { 
window.$ = $; 
1f ( deep ) 
windowjQuery =_jQuery: 
Tetum JQuery; 


12.2.2 混用 多 个 库 


如 果 jQuery 名 字 空 间 也 发 生 了 冲突 ， 可 以 使 用 jQuery.noConflict(deep) 函数 进行 解决 ， 它 是 12.2.1 节 介 
绍 的 noConflictO 国 数 的 高 级 版 本 ， 当 参数 deep 为 tue 时 ， 该 图 数 能 够 把 $ 和 jQuery 的 控制 权 都 交还 给 原 
来 的 库 ， 因 此 将 完全 重新 定义 jQuery。 

【示例 1】 在 这 个 示例 中 设 有 调用 jQuery.noConflict(deep) 函数 ， 因 此 最 后 执行 的 依然 是 jQuery 框架 的 名 


<script type="text/Javascript"> 
var J]Query = function()1{ 
alert(" 其 他 库 名 "): 
} 
</script> 
<script src="]Jquery/Jquery-3.1.1.]s" type="text/Javascript"></script> 
<script type="text/Javascript"> 
$(function(){ 
alert("jQuery 库 名 "); 
}) 
</script> 


现在 ， 调 用 jQuerynoConflictO 孙 数 ， 并 癌 其 传递 一 个 true 参数 ， 则 jQuery 会 使 用 内 部 变量 _jQuery 恢 
复 jQuery 库 之 前 的 最 初 功能 。 

【示例 2】 定 义 全 局 变量 ]QuerySelf 暂 存 jQuery 名 字 空 间 ， 并 通过 jQuery.noConflict(true) 函数 恢复 
jQuery 最 初 的 名 字 空 间 语义 。 所 以 ， 在 下 面 示 例 中 将 看 到 如 何 避 免 库 冲突 ， 同 时 又 能 够 实现 库 之 间 相 安 无 
事 ， 可 以 在 同一 个 文档 中 交叉 使 用 。 

<script type="text/Javascript"> 

var $ = JQuery = function(){ 

alert(" 其 他 库 名 "); 

} 

</script> 

<script src="Jquery/Jquery-3.1.1.]s" type="text/Javascript"></script> 

<script type="text/Javascript"> 

var JQuerySelf = JQuery.noConflict(true): 

$(functionO{ // 将 执行 其 他 库 名 字 空 间 

alert("jQuery 库 名 "); 
}) 
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]QueryselttfunctlonW1 /将 执行 jQuery 库 名 字 空 间 
alert("jQuery 库 名 "): 
1) 


</script> 


jQuery.noConflict(deep) 图 数 的 实现 原理 很 简单 ， 即 如 果 参 数值 为 tue， 则 使 用 临时 变量 jQuery 恢复 它 
的 最 初 功能 。 


12.3 小 工 有 内 


jQuery 集成 了 Web 开发 中 频 侈 的 日 党 操作 ， 为 JavaScript 扩展 了 很 多 方法 ， 使 用 这 些 方法 可 以 简化 
JavaScript 操作 难度 。 


12.3.1 修 勇 子 符 串 


jQuery 扩展 了 字符 串 处 理 方法 ， 定 义 了 trim0 和 param0 清 数 。 其 中 trim0 用 于 修剪 字符 串 ， 而 paramO) | 
能 够 把 数组 或 对 象 转换 为 字符 串 序列 。 | 

trim() 是 一 个 全 局 函数 ， 可 以 直接 使 用 jQuery 对 象 进行 调用 ， 该 函数 包含 一 个 字符 串 型 的 参数 ， 即 将 
被 修剪 的 字符 串 ， 返 回 修剪 后 的 字符 串 。 

【示例 】 演 示 字 符 串 在 被 jQuery 的 trim0 修剪 前 后 的 字符 串 长 度 变 化 。 

var str=" 去掉 字符 串 起 始 和 结尾 的 空格 


alert(str.leneth): /1 返回 19 
str = JQuery.trim(str): 
alert(str.leneth): /返回 13 


12.3.2 序列 化 字 从 申 


jQuery 的 param0 函数 能 够 将 表单 元 素数 组 或 者 对 象 序列 化 ， 它 是 serialize0 方法 的 基础 。 所 谓 序列 化 ， ， 
就 是 数组 或 者 jQuery 对 象 按照 名 / 值 对 格式 进行 序列 化 ， 而 JavaScript 普通 对 象 按照 名 / 值 对 格式 进行 序 | 
9 化 。 | 
【示例 】param0 苑 数 能 够 把 列表 结构 的 对 象 obj 转换 为 字符 串 类 型 的 名 / 值 对 字符 串 ， 返 回 字 符 串 
width=400&height-300。 | 


$(function(O { 
Var optlion = { 
width:400. 
helght:300 
var str = JQuery.param( option ): 
alert(str): 


}) 
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12.3.3 检测 数组 


由 于 数组 和 对 和 象 部 是 散 列 式 列表 结 构 ， 它 们 都 可 以 存储 大 量 数据 ， 开 发 人 员 襄 欢 使 用 数组 或 者 对 和 象 来 进 
行 数据 中 转 ， 但 是 数组 和 对 象 的 操作 方法 各 异 ， 如 何在 开发 中 快速 了 解 当前 值 是 数组 或 者 是 对 象 就 非常 重要 。 
isArray0 图 数 是 jQuery 定义 的 负责 检测 对 象 是 否 为 数组 的 专用 工具 。 该 工具 用 法 简单 ， 比 较 实 用 ， 它 
可 以 快速 判断 指定 对 象 是 否 为 数组 ， 以 方便 程序 进行 处 理 。 
【示例 】 检 测 变量 a 是 否 为 数组 ， 如 果 是 数组 则 执行 特定 的 代码 。 
$(function(){ 
var a=| 
{width:400}, 
‘height:300} 
]: 
if(jQuery isArray( a )) 
alert(" 变量 a 是 数组 "): 
1) 


isFunction0 是 jQuery 定义 的 用 来 检测 指定 对 象 是 否 为 图 数 类 型 的 图 数 。 该 果 数 与 isArray0 上 男 数 用 法 相 
同 ， 其 实现 的 JavaScript 代码 如 下 : 
function isFunction( ob] ){ 
retum Object.prototype.toSstring.call(ob]) —= "|object Function|": 
} 


jQuery 1.3 以 后 , 在 正 浏 览 硕 中 ， 浏 览 硕 提 供 的 图 数 ， 如 alert 和 getAttribute 将 不 被 视 为 限 数 。 


12.3.4 遍历 对 象 


JavaScript 使 用 for 或 for/in 语句 实现 迭代 操作 。jQuery 向 化 了 这 种 操作 ，each0 男 数 是 jQuery 通用 大 
代 工 具 ， 可 用 于 遍历 数组 或 者 集合 对 象 。 用 法 如 下 : 


]Query.each(oblect [callback|) 


参数 object 表示 要 遍历 的 集合 对 象 ; callback 表示 回调 图 数 ， 该 图 数 将 在 遍历 每 个 成 员 时 触发。 回调 轩 
数 包含 两 个 默认 参数 ， 第 一 个 参数 为 对 象 成 员 或 数组 的 索引 ， 第 二 个 参数 为 对 应 变量 或 内 容 。 

【示例 1】 调 用 jQuery each0 函数 遍历 数组 a， 然后 在 遍历 过 程 中 逐一 提示 该 数组 元 素 的 下 标 值 和 元 素 
值 ， 如 图 12.4 和 图 12.5 所 示 。 


$(function(){ 
var a=|[ 
{width:400}, 
{height:300} 
- 
JQuery.each(a,function(name.value){ 
alert(" 当前 成 员 的 名 称 : "十 name +"=" 十 value): 
月 
}) 
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全 当前 成 员 的 名 称 : 0 = [object Object] 1 ， 当前 成 员 的 名 称 : 1 = [object Object] 


图 12.4 访问 第 一 个 元 素 图 12.5 访问 第 二 个 元 素 


如 果 中 途 需要 退出 each0 循环 ， 则 可 以 在 回调 函数 中 返回 false， 其 他 返回 值 将 被 忽略 。 
【示例 2】 在 示例 1 的 基础 上 ， 在 each0 函数 中 添加 一 个 条 件 语句 ， 如 果 数 组 下 标 超 过 0， 则 退出 循环 。 
$(function(){ 
Var a=| 
{width:4001, 
{height:300} 


下 
J]Query.each(a.function(name.,value): 
jftname>0) return false: 。“// 仅 执行 一 次 循环 即 退出 
alert(" 当前 成 员 的 名 称 : " 二 name 十 "= "十 Value): 
}) 
4) 


jQuery 的 each0 函数 与 jQuery 对 象 的 each0 方法 功能 相同 ， 但 是 用 法 不 同 ， 另 外 each0 函数 可 用 于 遍 
历任 何 关 


12.3.5 ”转换 数组 


在 散 列 表 结构 中 的 数据 ， 可 能 是 数组 类 型 ， 也 可 能 是 对 象 类 型 。 由 于 数组 和 对 和 象 类 型 拥有 不 同 的 操作 
方法 ,特别 是 数组 对 象 ，JavaScript 为 其 定义 了 众多 强大 的 处 理 方法 。 因 此 ， 在 DOM 中 经 常 需要 把 列表 结 
构 的 数据 转换 为 数组 。 

【示例 1】 使 用 jQuery 获取 文档 中 所 有 二 元 系 ， 则 返回 的 应 该 是 一 个 类 似 数组 结构 的 对 象 ， 但 是 如 果 和 下 
接 为 其 调用 reverse0 数组 方法 ， 则 会 显示 编译 错误 ， 如 图 12.6 所 示 。 因 为 $0"") 返回 的 是 一 个 类 数组 结构 
的 对 象 ， 而 不 是 数组 类 型 数据 。 

<ScIlpt type=—"text/Javascript"> 

$(function(O{ 

Var aIT = $("]1"): 
$("ul").html(arr.reverse()); 


1) 
</script> 


<U]> 
<>1=</] > 
< >2=/]> 
<]>3</]> 
< >4=/ > 
< >9</]> 
</ul> 


“JO 


文件 (查找 (N) 禁用 (S) 查看 (V) 图 像 作 ”缓存 (C) 工具 (TM) 验证 (A) | 
浏 星 需 模式 : IE10 兼容 性 视图 上 京 档 模式 [W): IE7 标准 一 | 面 
HTML CSS | 控制 台 | 脚本 ”探查 线 ”网 洛 

NA 攻 

各 HTHL1261: localhost 是 已 添加 到 埋 客 性 视图 的 网 站 。 


test .html] 


图 12.6 错误 的 调用 方法 


jQuery 的 makeArray( 国 数 能 够 把 这 些 类 数组 结构 的 对 象 转 换 为 数组 对 象 。 所 谓 类 数组 对 象 ， 驶 是 对 象 
也 拥有 length 属性 ， 其 成 员 索 引 从 0 到 length-1。 但 是 这 些 对 象 不 能 调用 数组 方法 。 

【示例 2】 针对 示例 1， 可 以 先 使 用 makeArray0 图 数 把 类 数组 对 象 转换 为 数组 对 象 ， 然 后 再 为 其 
reverse0 方法 。 这 时 就 可 以 看 到 页 面 中 的 列表 结构 被 颠倒 过 来 。 


贡 用 


$(function(){ 
var arr = jQuery. makeArray($("li")): / 转换 为 数组 
$("u1").html(arr.reverse()); // 再 调用 reverse() 方法 
}) 


12.3.6 ”过 滤 数 组 


jQuery 定义 了 grep0 函数 ， 该 函数 能 够 根据 过 滤 函 数 过 滤 挥 数组 中 不 符合 条 件 的 元 素 。grep0 函数 包含 
3 个 参数 ， 用 法 如 下 : 


JQuery.erep(array, callback, [invert|) 


参数 array 表示 要 过 滤 的 数组 ; callback 表示 过 滤 函 数 。 如 果 过 滤 函 数 返 回 true， 则 保留 元 素 ; 如 有 果 过 渡 
图 数 返 回 false， 则 可 以 删除 元 素 。 
过 滤 函 数 将 过 历 并 处 理 数 组 中 每 个 元 素 。 该 函数 包含 两 个 参数 ， 第 一 个 参数 表示 当前 元 素 ， 人 第 二 个 参 
数 表示 元 素 的 索引 值 。 过 滤 函 数 应 返回 一 个 布尔 值 ， 如 果 为 ttue， 则 表示 当前 元 素 保留 ; 如 果 为 false， 则 表 
示 当 前 元 素 被 删除 。 为 外 ， 此 函数 可 设置 为 一 个 字符 串 ， 当 设置 为 字符 串 时 ， 将 视 为 lambda-form (缩写 形 
式 )， 其 中 a 代表 数组 元 紊 ，i 代表 元 条 索引 值 。 例 如 ，a > 0 代表 “function(a){ returna> 0;}”。 
grep() 函数 的 第 三 个 参数 invert 是 一 个 可 选 的 布尔 值 ， 如 采 为 false 或 者 没有 设置 ， 则 返回 数组 中 由 过 
滤 函 数 返回 true 的 元 素 ; 如 果 该 参数 为 tue， 则 返回 过 滤 函 数 中 返回 false 的 元 素 集 。 
【示例 1】 使 用 grep0 力 数 租 选 出 大 于 等 于 5 的 数组 元 系 ， 并 返回 一 个 新 数组 。 
$(function(){ 
Var alt = [1,2,3,4,5,6,7.8.9,0|: 
alT = JQuery.erep(art, function(value, IndeX){ 
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return Value >= $: 


}); 
alert(arm: /返回 5,6,7,8,9 
)) 


【示例 2】 反 过 来 ， 如 果 过 滤 大 于 等 于 5 的 数组 元 素 ， 则 可 设置 第 三 个 参数 值 为 true。 


$(functionO { 
Var aIT = [1,2,3,4,5,6,7,8,9,0]: 
alT = JQuery.erep(arr, function(value, index){ 
return Value >= $5; 
}, true); 
alert(arm): /返回 1.2.3.4.0 
1) 


12.3.7 ”映射 数组 


jQuery 定义 了 一 个 映射 数组 的 函数 map0， 该 师 数 拥有 grep0 函数 的 过 滤 功 能 ， 同 时 还 可 以 把 当前 数组 
根据 处 理 滑 数 处 理 后 映射 为 新 的 数组 ， 甚 至 可 以 在 映射 过 程 中 放大 数组 。 

map0 国 数 的 用 法 与 grep0 函数 基本 相似 ， 包 含 两 个 参数 ; 第 一 个 参数 表示 被 映射 的 数组 ; 第 二 个 参数 
表示 数组 元 素 处 理 转换 函数 。 用 法 如 下 : 

JQuery.map(array, callback) 


作为 第 二 个 参数 的 转换 函数 会 被 每 个 数组 元 素 调用 ， 而 且 会 给 这 个 转换 函数 传递 一 个 表示 被 转换 的 元 
素 作为 第 一 参数 ， 元 素 的 序号 作为 第 二 个 参数 被 传递 给 转换 函数 。 转 换 函 数 可 以 返回 转换 后 的 值 。 

如 果 转 换 函 数 返回 值 为 mull， 则 表示 删除 数组 中 对 应 的 项 目 。 如 果 转 换 函 数 返 回 值 为 一 个 包含 值 的 数 
组 ， 则 表示 将 扩展 原来 的 数组 。 

【示例 1] 将 数组 arr 中 的 元 素 放大 一 倍 之 后 ， 映 射 到 一 个 新 的 数组 中 。 


$(function(O { 
var HT 三 |1.2.3.4|: 
ar 三 ]QueryImap(ar function(elem){ 
return elem * 2; 
}); 
alert(arr): /返回 2.4.6.8 
1) 
【示例 2】 如 果 修 改 转换 函数 ,设置 放大 之 后 小 于 5 的 元 素 值 ， 则 返回 null， 即 过 滤 掉 数组 中 1 和 2 两 
Wr 
$(function(O { 
var alr = [1,2,3,4]: 
alT = JQuery.map(arr, function(elem){ 
return elem * 2 > $5? elem * 2 : null. 
}); 
alert(arr): /返回 6.8 
}) 
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【示例 3】 如 果 在 转换 函数 中 设置 返回 值 为 数组 ， 则 可 以 在 映射 数组 中 扩大 数组 的 长 度 。 
$(functionO{ 
Var aT 三 |1.2.3.4|: 


ar = JQuery.map(arr, fanctlon(elem){ 
retum [elem.,elem * 2|: 
月 : 
alert(arr): 1 返回 1,2, 2,4, 3,6, 4,8 
}) 


12.3.8 合并 数组 


jQuery 定义 了 一 个 合并 数组 的 函数 merge0， 该 图 数 能 够 把 两 个 参数 数组 合并 为 一 个 新 数组 并 返回 。 
merge0 函数 用 法 很 简单 ， 只 需要 问 其 传递 两 个 数组 参数 即 可 。 返 回 的 结果 会 修改 第 一 个 参数 数组 的 内 容 ， 
即 第 一 个 参数 数组 的 元 素 后 面 被 连接 了 第 二 个 参数 数组 的 元 素 。 

【示例 】 调 用 merge0O 函数 把 数组 arrl 和 arr2 合并 在 一 起 ， 并 把 合并 后 的 数组 传递 给 arrl1， 同 时 返回 合 


并 后 的 新 数组 。 

$(function(){ 
var arrl = [1,2,3,|"a", "b", "ce" ||: 
Var arr2 = [4.5.6.[7.8.9]]: 
alr3 = JQuery.meree(arrl, arr2): 
alert(arr1): /返回 数组 [1,2,3,["a", "b", "ec"],4,5,6,[7,8,9] ] 
alert(arrl .length): /返回 8 
alert(arr3): 1 返回 数组 [1,2,3,["a", "b", "c"].4.5.6.[7.8.9] ] 
alert(arr3.lenegth): /返回 8 

1) 


12.3.9 删除 重复 项 


在 DOM 操作 中 ， 如 果 合 并 两 个 jQuery 对 象 ， 可 能 会 存在 重复 的 DOM 元素 对 象 。 为 此 ，jQuery 专门 
定义 了 unique0 函数 ， 该 函数 可 以 把 重复 的 DOM 元 素 删除 。 
考虑 到 JavaScript 数组 中 可 能 会 存在 相同 数值 的 元 素 ， 因 此 jQuery 把 该 函数 的 功能 限制 在 只 处 理 删除 
DOM 元 素数 组 ， 而 不 能 处 理 字符 串 或 者 数字 数组 。 
unique0 函数 用 法 简单 ， 它 能 够 把 传递 进来 的 参数 数组 进行 过 滤 ， 并 删除 重复 的 DOM 对 象 元 素 。 
【示例 】 变 量 arrl 存储 了 3 个 DOM 元 素 ， 而 arr2 存储 了 2 个 DOM 元 素 , 合并 之 后 ， 其 中 两 个 DOM 
元 素 是 重复 的 ， 调 用 unique0 函数 之 后 ， 可 删除 这 两 个 重复 的 选项 ， 从 而 使 合并 后 的 数组 中 仅 包 含 3 个 
DOM 对 象 。 
<script type="text/Javascript"> 
$(function(){ 
Var $arrl = $("#ul 11"):; 
Var $arr2 = $(".red"); 
Var $aIT3 = JQuery.merege($arrl, $arr2); 
Var $arr4 = jQuery.unique($arr3): 
alert($arrl.leneth): 1// 返回 3 


es DO 。 
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alert($arr3.lenegth): /返回 3 
alert($arr4.length): /返回 3 
}) 
</script> 
<u 1d="ul"> 
<] 1 一 /]> 
<]>2 一 / 洛 > 
< class="red">3<J/]1> 
</Uul> 
< id="u2"> 
<]i class="red">4<]1> 
<]1>5</li> 
<]1>6</]i> 
</ul> 


jQuery 是 一 个 类 数组 结构 的 对 象 ， 但 是 它 不 是 数组 ， 可 以 把 它 视 为 散 列 表 结 构 的 数据 集合 ， 更 准确 地 
说 是 一 个 DOM 元 素 集合 。 为 了 方便 访问 这 个 数据 集合 ，jQuery 定义 了 一 套 工具 ,使 用 这 些 工具 可 以 模拟 
数组 的 访问 方式 ， 同 时 方便 用 户 人 遍历 jQuery 对 象 ， 以 便 对 其 中 的 DOM 元 素 进行 操作 。 


12.3.10 遍历 jQuery 对 和 象 


jQuery 为 jQuery 对 象 定义 了 each0 方法 ,实现 对 jQuery 对 象 进行 遍历 ， 并 在 每 个 匹配 的 元 素 上 调用 
调 困 数 。 用 法 如 下 * 
each(callback) 


其 中 参数 callback 表示 一 个 可 执行 的 回调 函数 ， 并 在 每 个 匹配 的 元 素 上 执行 。 这 意味 着 ， 每 次 执行 传 
递 进来 的 函数 时 ， 卫 数 中 的 this 关键 字 总 是 指向 一 个 不 同 的 DOM 元素 ( 每 次 都 是 一 个 不 同 的 匹配 元 素 )。 
而 且 ， 在 每 次 执行 函数 时 ， 都 会 给 涌 数 传递 一 个 表示 作为 执行 环境 的 元 素 在 匹配 的 元 素 集 合 中 所 处 位 置 的 
【示例 】 使 用 jQuery 获取 文档 中 所 有 的 下 元素， 然后 为 这 个 jQuery 对 象 调用 each0 方法 ， 在 参数 回调 
函数 中 使 用 回调 卫 数 的 参数 index 重 写 当前 元 素 包 含 的 内 容 ， 则 可 以 看 到 每 个 元 素 在 jQuery 对 象 集 合 中 的 
序号 ， 如 图 12.7 所 示 。 
<script type="text/Javascript"> 
$(functionO{ 
$("1").each(function(index){ 
this.InnerHTML = ndex: 
}) 
}) 
</script> 
< > 
<li>1</li> 
<li>2</li> 
<]i>3</li> 
</Uul> 
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图 12.7 遍历 列表 结构 选项 


如 果 和 希望 中 途 停止 each0 方法 的 迭代 操作 ， 则 可 以 在 callback 回调 函数 中 设置 返回 值 为 false， 这 样 将 


自动 停止 循环 ， 如 同 在 普通 循环 中 使 用 break 语句 一 样 。 如 果 返 回 值 为 true， 将 跳 至 下 一 个 循环 ， 如 同 在 普 
通 的 循环 中 使 用 continue 语句 。 


12.3.11 获取 jQuery 对 象 长 度 


jQuery 为 jQuery 对 象 定义 了 length 属性 ， 该 属性 能 够 返回 当前 jQuery 对 象 包含 的 DOM 元 素 的 个 数 。 
【示例 】jQuery 对 象 的 length 属性 值 为 3， 即 包含 3 个 1 元 素 。 
<script type="text/Javascript"> 
$(function(){ 
alert($("l1").length): 


jQuery 在 length 属性 基础 上 还 封装 了 size0 方法 ， 该 方法 的 返回 值 与 length 属性 值 是 完全 相同 的 。 


J]JQuery.fhn = jQuery.prototype = { 
slze: function() 4 
return this.leneth: 
b 
} 


12.3.12 ”获取 选择 器 和 选择 沱 转 


从 1.3 版 本 开始 ，jQuery 新 增 了 selector 和 context 属性 ， 其 中 selector 能 够 返回 传 给 jQuery 的 原始 选择 


货 ， 而 context 属性 能 够 返回 传 给 jQuery0 的 原始 DOM 市 点 内 容 ， 即 jQuery 函数 的 第 二 个 参数 。 如 果 没 有 
指定 ， 默 认 指 向 当前 的 文档 对 象 (document )。 


简单 地 说 ，selector 和 context 属性 能 够 返回 用 户 找到 这 个 元 素 所 用 的 选择 需 。 这 两 个 属性 对 插件 开发 


人 员 很 有 用 ， 用 于 精确 检测 选择 带 碍 询 情况 。 
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【示例 】 对 于 $C("1i",ul) 对 象 来 说 ， 它 的 selector 属性 值 等 于 1， 而 context 属性 值 等 于 DOM 元 素 对 象 ， 
即 节点 名 称 为 UL 的 元 素 。 


<script type="text/Javascript"> 
$(functionO{ 


var ul = $("u1")[0]; 
alert($("]1",ul).selector):; 
alert($("l1",ul).context.nodeName); 


}) 


</script> 


<Ul>> 
< > 一 小 > 
< > 一 /人 > 
< 一 /> 
</Uul> 


12.3.13 ”获取 jQuery 对 象 成 员 


jQuery 为 了 方便 jQuery 对 象 与 DOM 集合 之 间 相 互 转换 定义 了 get0 方法 ， 该 方法 能 够 把 jQuery 对 象 
转换 为 DOM 元 素 集合 ， 即 把 jQuery 集合 对 象 转换 为 真正 意义 上 的 数组 ， 以 方便 操作 。 
【示例 】 调 用 get0 方法 把 jQuery 转换 为 DOM 数组 集合 ， 然 后 调用 reverse0 方法 苏 倒 数组 中 的 元 率 排 
序 ， 最 后 把 这 个 集合 插入 ul 元 素 中 。 在 浏览 冀 中 可 以 看 到 这 个 选项 列表 的 顺序 发 生 了 倒置 。 | 
<script type="text/Javascript"> | 
$(function(){ 
var $li = $("]i"): /获取 jQuery 对 象 
var li = $li.getO: // 转换 为 DOM 集合 
li.reverse(): / 调用 数组 方法 ， 颠 倒数 组 元 素 顺 序 
$C"u1").html(i): // 重 辣 ul 的 选项 列表 结构 
}) 


</script> 


<1Ul> 
<]l1>1</]> 
<]1>2</]1> 
<l1>3</]> 
</Ul> 
get0 方法 还 可 以 包含 一 个 index 参数 ， 该 参数 可 以 接收 一 个 自然 数 ， 表 示 从 jQuery 对 象 中 取得 其 中 一 
个 匹配 的 元 素 。index 表示 jQuery 对 象 内 的 元 素 下 标 位 置 ， 即 取得 第 几 个 匹配 的 元 素 。 这 能 够 让 你 选择 一 个 
实际 的 DOM 元 素 并 对 它 进行 直接 操作 ， 而 不 是 通过 jQuery 方法 或 者 函数 对 它 进 行 操作 。 / 
实际 上 ，get(index) 方法 与 jQuery 对 象 下 标 读 取 其 中 的 元 素 对 象 是 等 同 的 ， 例 如 : | 
$(this).get(3) 
$(this)[3] 


上 面 两 种 用 法 的 结果 都 是 完全 相同 的 。 
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是 、 

如 果 希 望 获取 指定 元 素 在 jQuery 对 象 中 的 位 置 ， 可 以 使 用 index0 方法 来 获取 。 该 方法 包含 一 个 DOM 
元 素 对 象 ， 并 根据 这 个 元 素 搜 索 与 之 匹配 的 元 素 ， 并 返回 相应 元 素 的 索引 值 。 如 果 找 到 了 匹配 的 元 素 ， 从 0 
开始 返回 ; 如 果 没 有 找到 匹配 的 元 素 ， 则 返回 -1。 


12.4 组 存 


jQuery 通过 data0 方法 文 持 缓存 功能 ， 用 来 缓存 页 面 中 需要 临时 存储 的 数据 。jQuery 定义 的 缓存 系统 
非常 复杂 ， 文 持 绥 存单 个 数据 和 一 组 数据 。 


12.4.1 认识 缓存 


提 及 缓存 ， 用 户 可 能 会 联想 到 客户 端 浏 览 紫 中 的 缓存 ， 或 者 服务 占 端 的 缓存 。 客 户 剖 缓存 是 存在 浏览 
者 计算 机 硬盘 上 的 ， 即 浏览 疮 临时 文件 夹 ， 而 服务 硕 缓 存 是 存储 在 服务 俘 内 存 中 的 。 当 然 ， 在 一 些 高 级 应 
用 场合 也 有 专门 的 缓存 服务 右 ， 甚 至 有 利用 数据 库 进行 缓存 的 实现 。 

在 jQuery 的 API 帮助 文档 中 ，jQuery 这 样 描述 数据 缓存 的 作用 : 用 于 在 一 个 元 素 上 存 取 数据 而 避免 了 
循环 引用 的 风险 。 

【示例 1】 数 据 对 象 被 循环 引用 ， 如 末 数 据 对 象 的 容量 很 大 ， 且 在 文档 中 多 次 引用 ， 就 会 造成 系统 资源 


的 条 张 。 
<script type="text/Javascript"> 
$(function(){ 
/被 引用 的 数据 


Var userInfo = [1{ 
mame" :" 张 三 "， 
“ape :- 12, 
"grade" :1 

本 | 
mame" : "村 四 ", 
age ” : 13, 
"grade" : 2 


外 
// 绑 定 事件 ， 调 用 方法 读 取 数 据 
$("input").eq(0).click(function(){ 


showInfo(" 张 三 ") 
DE 
$("input").eq(1).click(function(){ 
showlInfo(" 李 四 ") 
)); 
function getData(name){ /根据 name 字段 名 ， 检 索 数据 
for (var i in userInfo){ /过 历数 据 对 象 
if (userInfo[i].name — name){ // 过滤 数 据 
retum userInfofil]: 
break: 
} 
} 
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3 
function showInfo(name){ / 显示 数据 
Var Infto = getData(name): 
alert( 姓名 :'+infoname+'n'+' 年 龄 :+infoage+'+' 年 级 :二 infi.grade): 
} 
}) 
</script> 


<input type="button" value=" 显示 张 三 的 资料 " 户 
<input type="button" value=" 显示 李 四 的 资料 " 广 


【示例 2】 优 化 循环 引用 的 风险 ， 重 新 设计 数据 结构 。 本 例 重 写 了 userInfo 的 JSON 结构 ， 使 name 与 对 
象 key 直接 对 应 。 | 


var userInfo = { 
| 
ame" :" 张 三 ", 
“Ee 2 
"prade" :] 


| 
" 李 四 "{ 
mame" :" 李 四 ", 
“age : 13, 
"prade" -2 
} 
}; 


这 样 就 可 以 直接 恋 取 name 对 应 的 数据 ， 而 不 需要 重复 引用 数据 对 象 ， 并 进行 迭代 操作 。 


<scrlpt type="text/Javascript"> 
$(functionO{ 
Var userInfo = { 
/省略 
$("input").eq(0).click(functionO{ 
showInfo(" 张 三 ") 
请 
$("input").eq(1).click(function(){ 
showInfo(" 李 四 ") 
}): 
function showJInfto(name){ 
Var nfo = userInfo[name|:; 
alert( 姓名 :'+ infoname + "n+ ' 年 龄 :+infoage+'+' 年 级 :+info.grade): 


}) 
</script> 


<input type="button" value=" 显示 张 三 的 资料 " 广 
<input type="button" value=" 显示 李 四 的 资料 " 亡 


jQuery 正 是 根据 上 面 示例 的 简单 原理 来 设计 jQuery 数据 缓存 系统 的 。 
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12.4.2 ”定义 缓存 


使 用 data(name, value) 方法 可 以 为 jQuery 对 象 定 义 缓存 数据 。 这 些 缓存 数据 被 存放 在 匹配 的 DOM 元 素 
集合 中 ， 同 时 返回 缓存 数据 的 value。 

【示例 】 分 别 为 导航 列表 中 的 1 元 素 定 义 缓存 数据 ， 即 列表 选项 的 类 型 为 menu， 同 时 为 新 闻 列 表 中 的 
li 元 素 定义 缓存 数据 ， 即 列表 选项 的 类 型 为 news。 


<ScIlpt type="text/Javascript"> 


$(functionO 1{ 


$("#menu li"). data("type","menu"): 
$("#news li").data("type","news"): 


}) 
</script> 


<U] 1d="menu'"> 
<]>1</> 
<l1>2</> 
<]1> 3 一 /> 

</ul> 

<U] 1d="news"> 
<l>1</> 
<]l1>2</1> 
<l1>3</> 

</ul> 


如 果 jQuery 集合 指 回 多 个 元 素 ， 则 为 所 有 元 素 定义 缓存 数据 。 该 旺 数 在 DOM 元 素 上 存放 任何 格式 的 


12.4.3 ”获取 缓存 


jQuery 的 data0 方法 不 仅 可 以 定义 缓存 数据 ， 同 时 还 可 以 读 取 DOM 元 素 的 缓存 数据 。 此 时 ， 只 需要 一 
个 参数 即 可 ， 该 参数 指定 缓存 数据 的 名 称 。 


【示例 】 针 对 12.4.2 


节 示 例 ， 可 以 分 别 获取 并 元 素 列 表 中 的 数据 ， 并 根据 type 缓存 数据 的 值 分 别 显 示 不 


同 的 信息 ， 演 示 效 果 如 图 12.8 所 示 。 


<script type="text/Javascript"> 


$(finction(){ 


$("#menu 11").data("type","menu"): 
$("#news 11").data("type","news"); 
$("]1").each(function(index){ 
1f($(this).data(“type") 一 Imenu 儿 
$(this).text(" 导航 某 单 "+ (index+ 1) 


} 


else if($(this).data("type") — "news"){ 
$(this).text(" 新 闻 列 表 "+ (index+ 1)) 


} 
天 
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册 
</script> 


<U] 1d="menu"> 
<]>1</l1> 
<]1>2</]1> 
<]1>3</l1> 

</ul> 

<U] 1d=—"news"> 
<]1>1</l1> 
<]1>2</l1> 
<]1>3</l1> 

</l> 


总 


| htp//ocalhosim D BO 介 克 六 
”导航 菜单 1 
”导航 菜单 2 
”导航 沫 单 3 


， 新闻 列 表 4 
.新闻 列表 5 
新闻 列表 6 


图 12.8 “缓存 数据 在 程序 中 的 应 用 | 


如 果 读 取 的 缓存 数据 不 存在 ， 则 返回 的 值 为 undefined。 如 果 jQuery 集合 指向 多 个 元 素 ， 则 将 只 返回 第 
一 个 元 素 的 对 应 缓存 数据 。 

该 函数 可 以 用 于 在 一 个 元 素 上 存 取 数据 ， 从 而 避免 了 循环 引用 的 风险 。jQuery.data 是 1.2.3 版 的 新 功能 。 
用 户 可 以 在 很 多 地 方 使 用 这 个 函数 ，jQuery UI 经 常 调用 该 函数 。 | 


12.4.4 删除 缓存 


removeData0 函数 能 够 删除 指定 名 称 的 缓存 数据 ， 并 返回 对 应 的 jQuery 对 象 。 
【 示例】 删除 导航 列表 中 工 元 素 的 type 缓存 数据 。 


$(function(O){ 
$("#menu 11").data("type","menu"); 
$("#news 11").data("type","news"); 
$("]11").each(function(index)t{ 
if($(this).data("type") == "menu"){ 
$(this).removeData("type"): 


和 
else if($(this).data("type") — "news"){ 
$(this).text(" 新 闻 列表 "+ (index+ 1)) 
} 
}); 
4 
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12.4.5 jQuery 缓存 规范 


由 于 jQuery 缓存 对 象 是 全 局 对 象 ， 因 此 在 Ajax 应 用 中 ， 由 于 页 面 很 少 被 刷新 ， 缓 存 对 象 将 会 一 直 存 
在 ， 随 看 调用 data0 因数 操作 次 数 增 多 ， 或 者 因 使 用 不 当 ， 使 得 cache 对 象 急剧 膨胀 ， 最终 影 响 程序 的 性 能 。 
所 以 在 使 用 jQuery 数据 缓存 功能 时 ， 应 及 时 清理 缓存 对 象 ，jQuery 也 提供 了 removeData0 果 数 帮助 用 
户 手动 清除 数据 。 根 据 jQuery 框架 的 运行 机 制 ， 下 面 几 种 情况 不 知 要 手动 清除 数据 缓存 。 
回 对 elem 执行 remove0 操作 ，jQuery 会 日 动 清除 对 和 象 可 能 存在 的 缓存 。 
回 对 elem 执行 empty0 操作 ， 如 果 当 前 elem 子 元 素 存在 数据 缓存 ，jQuery 也 会 清除 子 对 象 可 能 存在 
的 数据 缓存 ， 因 为 jQuery 的 empty0 实现 其 实 是 循环 调用 remove0 删除 子 元 素 。 
jQuery 复制 节点 的 clone0 方法 不 会 复制 data 缓存 ， 也 就 是 说 ，jQuery 不 会 在 全 局 缓存 对 象 中 分 配 
一 个 新 节点 存放 新 复制 的 elem 缓存 。 
jQuery 在 clone0 方法 中 把 可 能 存在 的 缓存 指 回 的 属性 ( 即 elem 的 expando 属性 ) 替换 为 空 。 如 果 直 接 
复制 这 个 属性 ， 就 会 导致 原 elem 和 新 复制 的 elem 都 指向 一 个 数据 缓存 ， 中 间 的 互 操 作 都 将 会 影响 到 两 个 
elem 的 缓存 变量 。 
【示例 】 有 时 把 数据 缓存 一 起 复制 也 是 很 有 用 的 。 在 拖 动 操作 中 ， 当 单 击 源 日 标 elem 节点 时 ， 就 会 复制 
出 一 个 半 透 明 的 elem 副本 开始 拖 动 ， 并 把 data 绥 存 复制 到 拖 动 层 中 ， 等 到 拖 动 结束 ， 就 可 能 获得 当前 拖 动 
的 elem 相关 信息 。 现 在 jQuery 方法 没有 提供 这 样 的 处 理 ， 不 过 在 复制 源 目标 的 data 时 会 将 这 些 data 都 重新 
设置 到 新 复制 的 elem 中 ,这样 在 执行 dataname,value) 方法 时 ，jQuery 会 在 全 局 缓存 对 象 中 开辟 新 空间 。 
if (typeof($.data(currentElement)) — Dumber ) { 
var elemData = $.cache|$.data(currentElement)|: 
for (var k In elemData) { 
, dragineDiv.data(k, elemData[k]): 
} 


在 上 面 代码 中 ，$.data(elem,name,data) 包含 3 个 参数 ， 如 末 只 有 一 个 elem 参数 ， 这 个 方法 将 返回 它 的 


12.5 队 列 


jQuery 支持 数据 队列 ， 并 通过 定义 queue0 方法 实现 对 队列 的 完整 操作 。 这 对 于 一 系列 需要 按 次 序 执行 
的 图 数 特别 有 用 。 例 如 ，animate 动画 、Aijax 异步 请 求 和 交互 以 及 timeout 等 需要 一 定时 间 的 滑 数 。 


12.5.1 认识 队列 


队列 是 一 种 特殊 的 线性 列表 绪 构 ， 它 只 人 允许 在 表 的 前 问 (front ) 进行 删除 操作 ， 而 在 表 的 后 端 (rear ) 
进行 插入 操作 。 人 允许 插入 操作 的 一 端 被 称 为 队 尾 ， 人 允许 删除 操作 的 一 端 称 为 队 头 。 队 列 中 没有 元 素 时 ， 称 
为 空 队 列 。 在 队列 这 种 数据 结构 中 ， 最 先 插入 的 元 素 必 定 最 和 完 被 删 际 。 反 之 ， 最 后 插入 的 元 素 将 最 后 被 删 
除 ， 因 此 队列 又 称 为 “先进 先 出 ”( frst in first out，FIFO ) 的 线性 表 。 

实际 上 ，jQuery 把 队列 看 作 是 DOM 元 素 对 象 的 数据 缓存 工具 ， 但 是 它 与 data0 哺 数 实现 的 数据 缓存 有 
很 大 差异 ， 因 为 队列 中 存储 的 是 将 要 被 执行 的 一 连 串 的 动作 函数 。 
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12.5.2 添加 队列 


使 用 jQuery 的 queue0 可 以 把 滑 数 加 入 队列 ， 这 里 的 队列 通常 是 一 个 消 数 数组 。 当 为 同一 个 元 素 设计 
连续 动画 时 ， 如 多 次 执行 animate( 方法 ，jQuery 会 日 动 将 其 加 入 名 为 区 的 图 数 队 列 。 但 是 ， 如 果 需 要 对 于 
多 个 元 素 依次 执行 动画 ， 就 必须 借助 Queue0 函数 手动 设置 队列 。queue0 函数 能 够 在 匹配 元 素 的 队列 最 后 
添加 一 个 图 数 ， 并 调用 该 图 数 。queue0 函数 的 具体 用 法 如 下 : 


]Query.queue(element, queueName, newQueue) 
J]JQuery.queue(element., queue Name., callback()) 


回 element: 要 附加 队列 消 数 的 DOM 元素 ,或 者 是 已 附加 队列 函数 (数组 ) 的 DOM 元 素 。 
回 queueName: 含有 队列 名 的 字符 串 。 默 认 是 "Fx"， 标 准 的 动画 队列 。 
回 newQueue: 替换 当前 困 数 队列 内 容 的 数组 。 
四 callback0: 添加 到 队列 的 新 图 数 。 
每 个 元 素 可 以 通过 jQuery 包含 一 个 或 多 个 函数 队列 。 在 大 多 数 应 用 中 ， 只 有 一 个 列队 (访问 入 ) 被 使 
用 。 队 列 允 许 一 个 元 素来 异步 地 访问 一 连 串 的 动作 ， 而 不 终止 程序 执行 。 
jQuery.queue0 方法 允许 直接 操纵 这 个 图 数 队 列 。 用 一 个 回调 六 数 访问 jQuery.queue0 特别 有 用 ， 它 可 把 
新 图 数 置 人 队列 的 末端 。 
值得 注意 的 是 ， 当 使 用 jQuery.queue0 添加 一 个 函数 的 时 候 ， 用 户 必 须 保证 jQuery.dequeue0 在 下 一 个 
哺 数 执行 后 被 呼叫 。 
【示例 】 在 按钮 的 click 事件 中 定义 了 6 个 动作 ， 其 中 第 3 个 和 第 5 个 动作 是 通过 queue0 哺 数 手动 添加 
到 | 队列 中 的 oO 
但 是 ， 由 于 queue0 函数 是 在 队列 末尾 添加 一 个 函数 ， 则 在 该 行 后 面 的 动作 都 将 被 忽视 。 所 以 ， 读 者 会 
看 到 ， 在 浏览 希 中 预览 时 ， 小 方块 滑动 到 最 右 侧 之 后 ， 调 用 末尾 添加 的 队列 困 数 之 后 就 停止 了 啊 应 ， 演 示 
效果 如 图 12.9 所 示 。 
<ScIlpt type="text/Javascript" > 
$(function(O) { 
var $div= $("div"): 
$("input").click(functionO{ 
$div.slideDown("slow"): 
$div.animate( {left:+=400"} .2000): 
$div.queue(function(O){ /在 队列 的 末尾 添加 一 个 函数 
$(this).addClass("be"): 1/ 调用 该 回调 函数 之 后 动画 将 停止 
EE 
$div.animate( {left:"-=400"},2000); 
$div.queue(finction(){ 
$(this).removeClass("be"); 
让 
$div.slideUp("slow"); 
}); 
}) 
</script> 
<style type="text/css"> 
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.bg { backeround:blue:; } 
dv { position:absolute:; width:$Opx: helght:S0px: backeround:red: left:0: top:S0pX: display:none; } 
</style~> 


<input type="button" value=" 动画 演示 " 放 
<div></div> 


图 12.9 ”queue0 函数 应 用 


12.5.3 显示 队列 


当 为 匹配 的 元 素 添加 队列 之 后 ， 可 以 使 用 queue0 函数 获取 对 该 队列 的 引用 。 用 法 如 下 : 


J]JQuery.queue(element, [queueName|) 


参数 说 明 如 下 : 
加 ”element: 用 于 检查 附加 队列 的 DOM 元 素 。 
四 queueName: 含有 队列 名 的 字符 串 ， 黑 认 是 "Fx"， 标 准 的 动画 队列 。 
这 里 的 队列 实际 上 就 是 一 个 图 数 数组 ， 并 能 够 目 动 连续 执行 。 参 数 name 表示 队列 名 称 ， 一 般 黑 认为 你。 
【示例 】 获 取 div 元 素 默认 的 你 队列 ， 并 查询 该 队列 中 包含 多 少 函数 成 员 。 
<script type="text/Javascript" > 
$(function() { 
Var $div= $("div"): 
$("input").click(function() { 
$div.slideDown("slow"): 
$div.animate( {left:+=400") .2000):; 
$div.animate( {left:'-=400'}.2000); 


$div.slideUp("slow"): 
Var x = $div.queue():; 1/ 获取 div 元 素 默 认 的 队列 你 
alert(x.length): / 显示 你 队列 包含 4 个 函数 成 员 
| 
Wy 
</script> 


<input type="button" value=" 动画 演示 " 放 
<div></dIv> 


如 果 匹 配 的 元 素 不 止 一 个 ， 则 返回 指向 第 一 个 匹配 元 素 的 队列 ， 即 返回 第 一 个 元 素 包 含 的 函数 数组 。 
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12.5.4 里 新 队列 


一 个 队列 执行 完毕 之 后 ， 可 以 使 用 男 一 个 队列 进行 替换 ， 具 体 实现 方法 是 在 queue0 晴 数 的 第 二 个 参数 中 
传递 一 个 队列 ， 将 匹 pe 的 队列 使 用 一 个 新 的 队列 来 人 w= 即 用 新 的 函数 数组 人 “ 管 现在 已 执 1 了 的 困 数 数组 。 
【示例 】 分 别 为 div 元 素 设 计 两 个 动画 序列 ， 其 中 第 一 个 为 默认 的 低 动画 序列 ， 它 直接 被 绑 定 在 第 一 个 
按钮 的 click 事件 处 理 函 数 中 ， 该 动画 序列 包含 四 个 动作 因数 ， 按 顺序 作用 于 div 元 紊 ， 分 别 为 慢 速 显示 、 
慢 速 前 进 、 慢 速 后 退 和 慢 速 隐藏 元 素 。 
第 二 个 动画 序列 通过 queue0 图 数 定 义 ， 序 列 名 称 为 伺 ， 该 序列 中 包含 四 个 动作 困 数 ， 按 顺序 作用 于 
div 元 素 ， 分 别 为 快速 显示 、 人 快速 前 进 、 快 速 后 退 和 快速 隐藏 。 然 后 使 用 queue0 图 数 获取 名 称 为 fa 的 动画 
序列 ， 并 调用 queue0 因数 使 用 fa 动画 序列 蔡 换 低 动画 序列 ， 演 示 效 果 如 图 12.10 所 示 。 
<ScIlpt type="text/Javascript" > 
A 
var $div= $("div"); 
$( 人 人 click(functionO{f ”默认 的 第 一 个 动画 序列 ， 慢 速 动画 
$div.slideDown("slow"): 
$div.animate( {left:+=400"'} ,4000): 
$div.animate( {left:'-=400"} .4000): 
$div.slideUp("slow"): 


}); 
$div.queue("fa",function(){ // 自 定义 动画 序列 ， 人 快速 动画 
$div.slideDown("fast"): 
$div.animate( {left:+=400"} ,200), 
$div.animate( {left:'-=400'} ,200) 
$div.slideUp("fast "); 
PE 
var fa = $div.queue("fa"): 1/ 获取 对 自 定义 动画 序列 的 引用 
$("input").eq(1).click(function|O) 1+ 
$div.queue("fx",fa): 1/ 使 用 角 动画 序列 覆盖 默认 的 信 动画 序列 
1); 
}) 
</script> 
<style type="text/css"> 


.bg { backeround:blue: } 
dv { position:absolute:; width:SOpx: helght:S0pX: backeround:red: left:0: top:S0pX: display:none; } 
</style> 


<input type="button" value=" 执行 慢 速 演示 " 放 
<input type="button" value=" 更 新 动画 ， 执 行 快速 演示 " 放 
<div></div> 


让 


| -htpy/hocalho. - 加 已 生 交 于 
沪 行 慢 事 泣 示 “| 更 新 动画 ， 贞 行 快 圳 注 示 


图 12.10 ”更 新 队列 晴 数 


“fs 


ee zy 以 入 门 到 精通 ( 柚 课 精 编 且 ) 
吕 、 和 


< 铀 注意 : 在 动画 序列 执行 过 程 中 ， 并 不 是 立即 进行 替换 ， 而 是 等 到 当前 正在 执行 的 动作 完成 之 后 才 停 止 
正在 执行 的 你 序列， 并 继续 执行 第 二 个 fa 动画 序列 。 
在 queue(name, queue) 方法 中 ， 如 果 第 二 个 参数 是 一 个 空 数组 ([] )， 则 将 会 清除 原来 的 动 
画 序 列 。 例 如 ， 下 面 代码 将 清空 匹配 的 div 元 素 的 默认 动画 序列 。 
$("div").queue("fx", [|]); 


12.5.5 删除 队列 


dequeue() 滑 数 能 够 删除 指定 队列 中 最 顶部 的 函数 ， 并 执行 这 个 队列 函数 。 实 际 上 ，dequeue0 因数 是 将 
函数 数组 中 的 第 一 个 函数 取出 来 ， 并 执行 这 个 函数 。 那 么 当 再 次 执行 dequeue0 函数 时 ， 得 到 的 是 男 一 个 函 
数 了 ， 如 果 不 执行 dequeue0 函数 ， 则 队列 中 的 下 一 个 函数 将 永远 不 会 执行 。dequeue0 函数 包含 一 个 参数 ， 
用 来 指定 队列 的 名 称 ， 默 认为 低 。 

【示例 】 使 用 dequeue0 函数 结束 自 定 义 队列 函数 ， 并 使 队列 继续 进行 下 去 。 这 样 动画 将 会 连续 播放 ， 
直到 最 后 一 个 函数 被 执行 为 止 。 


<script type="text/Javascript" > 
$(function(){ 
var S$div= $("div"): 
$("input").click(function(){ 
$div.slideDown("slow"): 
$div.animate( {left:'+=400'} ,2000): 
$div.queue(functionO { 
$(this).addClass("be"): 
$(this).dequeue(); 
}); 
$div.animate( {left:'-=400" .2000): 
$div.queue(functionO { 
$(this).removeClass("be"): 
$(this).dequeue0: “W/W/ 删 除 最 项 部 的 函数 ， 并 继续 执行 队列 


外 
$div.slideUp("slow"): 
和 
1) 
</script> 
<style type="text/css"> 
.bg { background:blue: } 
dv { position:absolute: width:$Opx: helght:SOpX: backeround:red: left:0: top:SO0pX: display:none: } 
</style> 


<input type="button" value=" 动画 演示 " 廊 
<div></div> 
<div></div> 
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12.6 迁 ba 


在 开发 中 ， 用 户 经 常会 遇 到 很 多 耗 时 的 操作 ， 如 使 用 Ajax 异步 该 取 服 务 硕 数据， 或 者 同步 忆 历 一 个 大 
型 数组 ， 它 们 都 不 能 立即 得 到 结果 。 为 了 避免 此 类 问题 ，jQuery 增加 了 deferred 对 象 。 


12.6.1 认识 deferred 对 象 


简单 地 说 ，defered 对 象 就 是 jQuery 的 回调 了 清 数 解决 方案 ， 它 表示 延迟 到 未 来 某 个 点 再 执行 ， 目 的 是 
解决 如 何 处 理 耗 时 操作 的 问题 ， 对 那些 操作 提供 了 更 好 的 控制 ， 以 及 统一 的 编程 接口 。 

deferred 对 象 定 义 了 多 种 方法 ， 具 体 说 明 如 下 : 

回 $Deferred0: 生成 一 个 deferred 对 象 。 

加 defered.done0: 指定 操作 成 功 时 的 回调 滑 数 。 ] 

回 defered .fail0: 指定 操作 失败 时 的 回调 函数 。 | 

加 ”deferred.promise0 〇 : 没有 参数 时 ， 返 回 一 个 新 的 deferred 对 象 ， 该 对 象 的 运行 状态 无 法 被 改变 ; 接收 | 
参数 时 ， 其 用 为 在 参数 对 象 上 部 署 deferred 接口 。 
deferred.resolve0 : 手动 改变 deferred 对 象 的 运行 状态 为 “已 完成 "， 从 而 立即 触发 done0 方法 。 
deferred.rejectO: 与 deferedresolve0O 正好 相反 ， 调 用 后 将 deferred 对 象 的 运行 状态 变 为 “已 失败 ”， 
从 而 立即 触发 fail0 方法 。 
回 $when0: 为 多 个 操作 指定 回调 了 滑 数 。 
回 deferred.then0: 有 时 为 了 了 省事， 可 以 把 done0 和 fail0 合 在 一 起 写 ， 这 就 是 then0 方法 。 例 如 : 


$.when($.ajax( "/main.php" )).then(successFunc, failureFunc): | 


如 果 thenO 有 两 个 参数 ， 那 么 第 一 个 参数 是 done0 方法 的 回调 盟 数 ， 第 二 个 参数 是 fail0 方法 的 回 | 
调 清 数 。 如 果 then0 只 有 一 个 参数 ， 那 么 等 同 于 done0。 | 
加 ”deferred.always0: 定义 回调 函数 ， 它 的 作用 是 不 管 调用 的 是 deferred.resolve(0 还 是 deferred .reject0， 
最 后 总 是 执行 。 例 如 : 
$.ajax( "test.html" ) 
.always( function( falert(" 已 执行 ! "):} ): 


四 辐 


12.6.2 Ajax 链 式 写法 


先 回 顾 一 下 jQuery 的 Ajax 操作 的 传统 写法 ,代码 如 下 : 


$.ajax({ 
url: "test.html". 
success: function( ){ 
alert(" 成 功 了 ! 站 


. 

error:function()+ 
alert(" 出 第 路! "); 

} 


}); 


“313. 


0 1 从 入 门 到 精通 ( 微 课 精 编 版 ) 

在 上 面 的 代码 中 ，$.ajax0 接收 一 个 对 象 参数 ， 这 个 对 象 包含 两 个 方法 : success 方法 指定 操作 成 功 后 的 
回调 函数 ，error 方法 指定 操作 失败 后 的 回调 消 数 。 

$.ajax0 操作 完成 后 ， 如 果 使 用 的 是 低 于 1.5.0 版 本 的 jQuery， 返回 的 是 XMLHttpRequest 对 象 ， 用 户 就 
没 法 进行 链 式 操作 ; 如 果 高 于 1.5.0 版 本 ,返回 的 是 deferred 对 象 ， 可 以 进行 链 式 操作 。 

现在 ， 可 以 这 样 设计 : 

$.ajax("test.html") 

.done(functionO 〇 { alert(" 成 功 了 ! "):}) 

-fail(function(){ alert(" 出 错 啦 ! "): }): 


可 以 看 到 ，done( 相当 于 success 方法 ，fail0 相当 于 ermor 方 法。 采用 链 式 写法 以 后 ， 代 码 的 可 读 性 大 
大 提高 。 


12.6.3 定义 同一 操作 的 多 个 回调 函数 


deferred 对 和 象 的 一 大 好 处 就 是 它 允 许 用 户 自由 添加 多 个 回调 清 数 。 例 如 ， 以 12.6.2 节 上 面 的 代码 为 例 ， 
如 果 Ajax 操作 成 功 ， 除 了 原来 的 回调 函数 ， 还 想 再 运行 一 个 回调 滑 数 ， 怎 么 办 ? 

很 简单 ， 直 接 把 它 加 在 后 面 就 行 了 了 ， 代 人 码 如 下 : 

$.ajax("test.html") 

.done(functionO{ alert(" 成 功 了 1! "):}) 

fail 人 (function0f alert(" 出 错 啦 ! "): }) 

.done(functionO{ alert(" 第 二 个 回调 函数 ! "):} }: 


回调 函数 可 以 添加 任意 多 个 ， 它 们 按照 添加 顺序 执行 。 
12.6.4 为 多 个 操作 定义 回调 函数 


deferred 对 和 象 人 允许 用 户 为 多 个 事件 指定 一 个 回调 函数 ， 这 是 传统 写法 做 不 到 的 ， 它 主要 用 到 了 一 个 新 的 
方法 一 一 $.when0O0。 

【示例 】 下 面 代码 先 执 行 两 个 操作 : $.ajax("testl.html") 和 $.ajax("test2.html")， 如 果 都 成 功 了 ， 就 运行 
done0 指定 的 回调 函数 ; 如 果 有 一 个 失败 或 部 失败 了 ， 就 执行 fail0 指定 的 回调 函数 。 

$.when($.ajax("testl.html"), $.ajax("test2.html")) 

.done(functionO 〇 { alert(" 成 功 了 ! ": 1》) 

.fail(functionO{ alert(" 出 错 啦 ! 内: 0?): 


12.6.5 ”普通 操作 的 回 碳 函数 接口 


deferred 对 象 把 这 一 套 回 调 阴 数 接口 ， 从 Ajax 操作 扩展 到 了 所 有 操作 。 也 就 是 说 ， 任 何 一 个 操作 ， 不 
管 是 Ajax 操作 还 是 本 地 操作 ， 也 不 管 是 异步 操作 还 是 同步 操作 ， 都 可 以 使 用 deferred 对 象 的 各 种 方法 指定 
回调 卫 数 。 

【示例 1】 假 定 有 一 个 很 耗 时 的 操作 wait， 代 人 码 如 下 : 


var wait = function(){ 
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Var tasks = function(O{ 

alert(" 执行 完毕 ! "): 
}; 
setTimeout(tasks,$000): 
}; 


如 果 为 它 指定 回调 因数 ,用 户 可 能 会 想到 使 用 $.when0 方法 。 


Var walt = function(){ 
Var tasks = function(){ 
alert(" 执行 完毕 ! "): 


汪 
setTimeout(tasks,$000): 
和 
$.when(wait()) 


.done(fimction(O{ alert(" 成 功 了 ! "):}) 
fail(finctionO{ alert(" 出 错 啦 ! 由: }): 


【示例 2】 但 是 上 面 示例 done0 方法 会 立即 执行 ， 起 不 到 回调 函数 的 作用 。 原 因 在 于 $.when0 的 参数 只 
能 是 deferred 对 象 ， 所 以 必须 对 wait0 进行 改写 ， 代 码 如 下 : 
var dtd = $.Detferred(); // 新建 一 个 deferred 对 象 
Var walt = function(dtd){ 
Var tasks = function(){ 
alert(" 执行 完毕 ! "); 


dtd.resolve(): // 改变 deferred 对 象 的 执行 状态 
}; 
setlimeout(tasks,3000): 
return dtd: 
}; 
现在 ，waitO 函数 返回 的 是 deferred 对 象 ， 这 就 可 以 加 上 链 式 操作 了 。 
$.when(wait(dtd)) 


.done(function({ alert(" 成 功 了 ! "):}) 
.fail(functionO{ alert(" 出 错 啦 ! 让; }); 


waitO 函数 运行 完 ， 就 会 自动 运行 done0 方法 指定 的 回调 函数 。 


岩 提示 : jQuery 定义 deferred 对 象 有 三 种 执行 状态 :未 完成 、 已 完成 和 已 失败 。 如果 执行 状态 是 “已 完成 ” 
deferred 对 他 立刻 调用 done() 方法 指定 的 回调 函数 ; 如 果 执 行 状 态 是 “已 失败 ”"， 则 调用 fail0) 方 
法 指定 的 回调 函数 ; 如 果 执 行 状态 是 “未 完成 "， 则 继续 等 待 ， 或 者 调用 progress( 方法 指定 的 
回调 函数 ( jQuery 1.7 版 本 添加 )。 


在 Ajax 操作 时 ，deferred 对 和 象 会 根据 返回 结果 ， 有 自动 改变 自 号 的 执行 状态 ,但 在 wait0 函数 中 ， 这 个 
执行 状态 必须 由 用 户 手动 指定 。dtd.resolve0 方法 能 够 定义 将 deferred 对 象 的 执行 状态 从 “未 完成 ” 改 为 “已 | 
完成 "， 从 而 触发 done0 方法 。 | 

【示例 3】deferred.reject0 方法 可 以 定义 deferred 对 象 的 执行 状态 从 “未 完成 ” 改 为 “已 失败 ”"， 从 而 触 
发 fail0 方法 。 
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/Wm 
+ Wn 


Wh 
Wt 


var dtd = $.Deferred(): 1/ 新建 一 个 deferred 对 象 
var Wailt = function(dtd):{ 
Var tasks = function()4 
alert(" 执行 完毕 ! “"): 


dtd.reject(: // 改变 deferred 对 象 的 执行 状态 
setTimeout(tasks,$000): 
return dtd: 
下 
$.when(wait(dtd)) 


.done(functionO{ alert(" 成 功 了 ! "): 1》) 
.fail(functionO{ alert(" 出 错 啦 ! "); 3); 


【示例 4】 上 面 写法 还 有 一 个 问题 : deferred 对 象 是 一 个 全 局 对 象 ， 所 以 它 的 执行 状态 可 以 从 外 部 改变 。 


var dtd = $.Deferred(): 1/ 新建 一 个 deferred 对 象 
Var walt = ftunction(dtd)1{ 
var tasks = function(){ 
alert(" 执行 完毕 ! 让: 


dtd.resolve(): 1/ 改变 deferred 对 象 的 执行 状态 
b= 
setTimeout(tasks,S3000): 
return dtd: 
$.when(wait(dtd)) 


.done(fimctionO{ alert(" 成 功 了 ! "):}) 
.fail(functionO{ alert(" 出 错 啦 ! 四: 人 : 
dtd.resolve(); 


上 面 代码 在 尾部 加 了 一 行 dtdresolve0， 这 就 改变 了 deferred 对 象 的 执行 状态 ， 因 此 导致 done0 方法 立 
刻 执行 ， 弹 出“ 成功 了 ! ”的 提示 对 话 框 ， 等 5 秒 之 后 再 弹出 “执行 完毕 ! ”的 提示 对 话 框 。 
【示例 $S】 为 了 避免 这 种 情况 ，jQuery 提供 了 deferred.promise0 方法 。 它 的 作用 是 在 原来 的 deferred 对 
象 上 返回 男 一 个 deferred 对 象 ， 后 者 只 开放 与 改变 执行 状态 无 关 的 方法 ， 如 done0 方法 和 fail0 方法 ,屏蔽 
与 改变 执行 状态 有 关 的 方法 ， 如 resolve0 方法 和 reject0 方法 ， 从 而 使 得 执行 状态 不 能 被 改变 。 
var dtd = $.Deferred0: /新 建 一 个 deferred 对 象 
var wait = function(dtd):{ 
var tasks = function(){ 
alert(" 执行 完毕 ! “"): 
dtdiesolve0: “改变 deferred 对 象 的 执行 状态 
上 


‘tTimeout(tasks, 5000): 

return dtdpromise0: // 返回 promise 对 象 
让 
var d = walit(dtd): 1/ 新建 一 个 d 对 象 ， 改 为 对 这 个 对 象 进行 操作 
$.when(d) 


.done(functionO{ alert(" 成 功 了 ! "):}) 
.fail(functionO{ alert(" 出 错 啦 ! "); 站 ):; 
d.resolve(): // 此 时 ， 这 个 语句 是 无 效 的 
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在 上 面 这 段 代 码 中 ，waitO 明 数 返回 的 是 promise 对 象 。 然 后 ， 把 回调 明 数 绑 定 在 这 个 对 象 上 ， 而 不 是 
原来 的 deferred 对 象 上 。 这 样 就 无 法 改变 这 promise 对 象 的 执行 状态 ， 要 想 改 变 执 行 状 态 ， 只 能 操作 原来 的 
deferred 对 和 象 。 

【示例 6】 将 deferred 对 象 变 成 waitO 函数 的 内 部 对 象 ， 代 人 码 如 下 : 

var wailt = function(dtd){ 

var dtd = $.Deferred(); // 在 函数 内 部 新 建 一 个 deferred 对 象 
Var tasks = function(){ 

alert(" 执行 完毕 ! 站: 

dtd.resolve(): / 改变 deferred 对 象 的 执行 状态 


}; 

setlimeout(tasks.3000): 

return dtd.promise();”// 返回 promise 对 和 象 
上 
$_whenkwaitO) 


done(functionO{ alert(" 成 功 了 ! "): }) 
Jfail(function0{ alert0" 出 错 啦 ! "): )): 


使 用 deferred 对 象 的 建构 图 数 $.Deferred0 也 可 以 防止 执行 状态 被 外 部 改变 的 方法 ， 这 时 waitO 函数 还 
是 保持 不 变 ， 直 接 把 它 传 人 $.DeferredO0， 代 码 如 下 : 

$.Detferred(wait) 

.done(fimction(){ alert(" 成 功 了 ! "):)) 

fail(functionO{ alert(" 出 错 啦 ! ":; }); 


jQuery 定义 的 $.Deferred0 可 以 接收 一 个 因数 名 作为 参数 ，$.Deferred0 所 生成 的 deferred 对 象 将 作为 这 
数 的 默认 参数 。 
【示例 7】 除 了 上 面 两 种 方法 以 外 ， 还 可 以 直接 在 wait 对 象 上 部 署 deferred 接口 。 
var dtd = $.Deferred(): /生成 deferred 对 象 
Var walt =function(dtd){ 
Var tasks = function(){ 
alert(" 执行 完毕 ! 六: 
dtd.resolve(): /改变 deferred 对 象 的 执行 状态 


dl 


” 

setTimeout(tasks,$5000): 
dtd.promise(Wwait): 
wait.done(functionO 〇 { alert(" 成 功 了 ! 站 7).fail(functionO{ alert(" 出 销 啦 ! "); }): 
wait(dtd): 


这 里 的 关键 是 dtd.promise(wait) 这 一 行 代 人 码 ， 它 的 作用 就 是 在 wait 对 象 上 上 部署 deferred 接口 。 正 是 因为 
有 了 这 一 行 ， 后 面 才 能 直接 在 wait 上 面 调用 doneO0 和 failO。 


12.7 回调 匈 数 


在 jQuery 1.7 版 本 中 开始 引入 回调 函数 对 象 ，$.Callbacks 是 一 个 多 用 途 的 回调 函数 列表 对 象 ， 提 供 了 一 
种 强大 的 方法 来 管理 回调 函数 队列 。 整 个 $.Callbacks 的 源码 不 到 200 行 ， 它 是 一 个 工厂 国 数 ， 使 用 函数 调 
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| 用 方式 ( 非 new， 它 不 是 一 个 类 ) 创建 对 象 ， 它 有 一 个 可 选 参数 flags 用 来 设置 回调 困 数 的 行为 。 
| $.Callbacks 是 在 jQuery 内 部 使 用 ， 为 $.ajax、$.deferred 等 组 件 提供 基础 功能 的 图 数 。 它 也 可 以 用 在 类 
似 功能 的 一 些 组 件 中 ， 如 自己 开发 的 插件 。 下 面 主要 介绍 Callbacks 的 基本 用 法 。 


12.7.1 添加 回调 函数 


使 用 callbacks.add0 方法 可 以 添加 一 个 函数 到 回调 队列 之 中 。 用 法 如 下 : 
callbacks.add(callbacks) 

参数 callbacks 表示 一 个 限 数 ， 或 者 一 个 消 数 数组 ， 用 来 添加 到 回调 列表 。 
【示例 】 使 用 回调 函数 对 象 。 

ftunction fnlO { 


console.log(1) 
} 
tunction fn20 { 
console.loe(2) 


} 

var callbacks = $.Callbacks0:V 定义 Callbacks 对 象 
// 方式 1 

callbacks.add(fn1): 

/方式 2 一 次 添加 多 个 回调 函数 
callbacks.add(f{n1., fhn2): 

/方式 3 传 数 组 

callbacks.add([fn1, 1n21]); 

/方式 4 函数 和 数组 混合 

callbacks.add({n1. [fn21): 


| 当 参 数 是 数组 时 ， 在 add0 内 部 判断 如 果 是 数组 会 递归 调用 私有 的 add0 函数 。 此 外 ， 需 注意 add0 方 
法 默认 不 去 重 ， 比 如 这 里 血 1 添加 两 次 ，fire 时 会 触发 两 次 。 


12.7.2 删除 回调 函数 


使 用 callbacks.remove0 方法 可 以 从 回调 队列 中 删除 一 个 函数 。 上 有 具体 用 法 如 下 : 
callbacks.remove(callbacks) 


【示例 1】 爷 添加 两 个 回调 函数 ， 然 后 再 删除 第 一 个 回调 函数 ， 此 时 就 只 会 触发 和 2 了 。 


function 各 10) { 
console.log(1) 


} 
tunction fn2() + 
console.log(2) 


} 
Var callbacks = $.Callbacks(): 
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callbacks.add(fn1, fn2): 
callbacks.remove(tn1): 


【示例 2】remove0 方法 也 会 把 添加 多 次 的 函数 如 血 1， 全 部 删除 掉 。 


Var callbacks = $.Callbacks(): 
callbacks.add(fn1. fn2. fhl., fn2): 
callbacks.remove(fn1): 


此 时 会 把 添加 两 次 的 血 1 都 删 控 ， 这 样 就 只 触发 fn2 两 次 。 


12.7.3 ”判断 回调 函数 


为 了 避免 重复 添加 某 个 回调 函数 ， 可 以 先 使 用 callbacks has0) 方法 判断 是 否 添 加 过 该 回调 限 数 ， 用 法 | 
如 下 : | 
callbacks.has(callback) | 


【 示例】 高 速 添加 回调 函数 ， 避 免 重复 操作 。 


function fn10 { 
console.log(1) 

4 

Var callbacks = $.Callbacks(): 

if (lcallbacks.has(fn1)) { 
callbacks.add(f1n1): 

} 


12.7.4 清空 回 幸 上 数 


如 果 要 清空 回调 盟 数 对 象 中 所 有 图 数 列表 ， 可 以 使 用 callbacks.empty0 方法 ， 该 方法 不 需要 任何 参数 。 
【示例 】 当 为 callback 对 象 添 加 两 个 回调 困 数 后 ， 使 用 empty0 方法 快速 清空 回调 冰 数 列表 。 
function fnl() 1 


console.log(1) 
} 
function fn20 { 
console.log(2) 


上 

Var callbacks = $.Callbacks(): 

callbacks.add(f1n1): 

callbacks.add(1n2): 

callbacks.empty'(); | 

此 时 再 使 用 fire0 方法 不 会 触发 任何 函数 。empty 函数 实现 很 简单 ， 只 是 把 内 部 的 队列 管理 对 象 list 重 ， 
置 为 一 个 空 数 组 。 这 里 可 以 了 解 清空 数组 的 几 种 方式 。 
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”12.7.5 ”禁用 回调 函数 


使 用 callbacks.disable0 方法 可 以 禁用 回调 图 数 对 象 ， 该 方法 也 不 需要 任何 参数 。 调 用 后 绸 使 用 add0、 
Temove(0 、frre0 等 方法 均 不 起 作用 。 实 际 上 ，callbacks.disable0 方法 将 队列 管理 对 象 list、stack、memory 都 
议 置 为 undefined 了 。 

【示例 】 禁 用 回调 函数 。 

function fnl() { 

console.log(1) 


} 
function fn20 { 
console.log(2) 


} 

var callbacks = $.Callbacks( ); 

callbacks.disable( ): 

callbacks.add(fn1): /不 起 作用 
callbacks.add(fn2): /不 起 作用 
callbacks.remove(fh1): /不 起 作用 
callbacks fire0: / 不 起 作用 


”12.7.6 触发 回调 函数 


| 使 用 callbacks.fireO 方法 可 以 主动 触发 添加 的 回调 图 数 。frre0 方法 用 来 触发 回调 函数 ， 默 认 的 上 下 文 是 
| callbacks 对 象 ， 还 可 以 通过 fue0 方法 传递 参数 给 回调 也 数 。 其 用 法 如 下 : 
| callbacks fire(arguments) 


参数 arguments 表示 将 传递 给 回调 曙 数 的 参数 。 
【示例 1】 通 过 fre0 方法 为 回调 困 数 传递 数字 3， 然 后 在 回调 盟 数 中 就 会 接收 到 该 参数 ， 并 进行 处 理 。 
tunction fn(}) + 


console.loglthls): 
console.log(areuments): 


} 

Var callbacks = $.Callbacks(): 
callbacks.add(fn): 
callbacks.fire(3): 


【示例 2】callbacks fireWith0 与 fre0 方法 相同 ， 但 可 以 指定 执行 上 下 文 。 


function fn(O) { 
console.log(this): 
console.log(areuments): 
和 


Var person = {name: ']acK }: 
var callbacks = $.Callbacks(): 
callbacks.add(fn): 
callbacks.fireWith(person., [3]): 
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其 实 fre0 内 部 调用 的 是 freWithO0， 只 是 将 上 下 文 指定 为 this 了 ， 而 this 正 是 $.Callbacks 构造 的 对 象 。 | 
【示例 3】 使 用 callbacks fired0 方法 可 以 判断 回调 函数 是 否 有 主动 触发 过 ， 即 是 否 调用 过 fre0 方法 或 
freWith0 方法 。 | 


function {nl1() { 
console.log(1) 

} 

var callbacks = $.Callbacks( ); 

callbacks.add(f1n1): 

callbacks.fired(): 

callbacks.fire(): 

callbacks.fired(): 


< 负 注意 : 只 要 调用 过 一 次 fre0 或 freWith0 就 会 返回 true。 


12.7.7 ”锁定 回调 函数 


使 用 callbacks.lock0 方法 可 以 锁定 回调 困 数 对 象 中 队列 的 状态 ， 然 后 可 以 使 用 callbacks.locked0 方法 
判断 是 否 锁定 状态 。 在 $.Callbacks 构造 时 可 配置 的 参数 Flags 是 可 选 的 ， 字 符 串 类 型 ， 以 空格 分 隔 ， 包 括 
once、memory、unique、stopOnFalse。 

【示例 1】once 可 以 确保 回调 困 数 仅 执行 一 次 。 


function fn() + 
console.log(1) 
} 
Var callbacks = $.Callbacks('once'); 
callbacks.add(fn): 
callbacks.fire(): /打印 1 
callbacks.fire(): /和 不 再 触发 


【示例 2】memory 可 以 记忆 callbacks。 


tunction {nl() + 
console.log(1) 

4 

function fn2() {+ 
console.log(2) 


} 

var callbacks = $.Callbacks(memory ): 

callbacks.add(f1n1): 

callbacks fire(): 1/ 必须 先 调 用 fire0 | 
callbacks.add(fn2); // 此 时 会 立即 触发 和 2 | 


memory 选项 有 点 烦琐 ,本 意 是 记忆 的 意思 。 实 际 上 ，memory 选项 需 结合 特定 场景 ( 如 jQuery.Deferred ) | 
分 析 。 当 首次 调用 fre0 后 ， 之 后 每 次 add0 部 会 立即 触发 。 如 先 调用 callbacks fre0， 再 添加 callbacks.add(fn1)， 
这 时 血 ]1 会 立即 被 调用 。 | 
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【示例 3】 如 有 果 是 批量 添加 的 ， 也 都 会 被 触发 。 


tunction fn1(0) + 
console.log(1) 


} 
function fn2() { 
console.log(2) 


| } 

| function fn30 { 
console.log(3) 

} 

Var callbacks = $.Callbacks(‘memory’): 

callbacks.add(fn1): 

callbacks.fire(): 

callbacks.add([fn2., fn3]): //1, 2,3 


【示例 4】unique 可 以 去 除 重 复 的 回调 函数 。 


function tnl() + 
console.log(1) 
b 
function fn2() { 
console.log(2) 
} 
Var callbacks = $.Callbacks('unique'"): 
callbacks.add(f{n1): 
callbacks.add([fn1, fn2]): / 册 次 添加 血 1 
callbacks.fire(): Hl1,2 


之 前 用 has0 方法 判断 去 重 ， 现 在 使 用 unique 属性 则 更 方便 。 上 面 代码 先 使 用 add0 方法 添加 血 1， 第 
二 次 再 使 用 add0 方法 时 内 部 则 会 去 重 。 因 此 ， 最 后 使 用 fre0 方法 时 只 输出 “1,2” 而 不 是 “1,1,2”。 

【示例 5】stopOnFalse 可 以 设置 回调 困 数 返回 false 时 中 断 回调 队列 的 迭代 。 

function fn1Q + 


console.log(1) 
} 
function fn20 { 
console.log(2) 
Tetum false // 注意 这 里 
EL 
function fn3() { 
console.log(3) 
} 
var callbacks = $.Callbacks('stopOnFalse'): 
callbacks.add(f{n1. fh2, fn3); 
callbacks.fire(): i/1,2 


| 从 该 属性 名 就 能 知道 它 的 意图 ， 即 回调 了 数 通 过 retum false 来 停止 后 续 的 回调 执行 。 在 上 面 代 人 码 中 添 
| 加 了 3 个 回调 函数 , fn2 中 使 用 return false， 当 fire0 执行 到 fn2 时 会 停止 执行 ， 后续 的 fn3 就 不 会 被 调用 了 。 
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12.8 案例 实战 / 


动态 加 载 内 容 是 相对 于 传统 的 Web 设计 静态 加 载 内 容 而 言 的 。 在 传统 的 网 站 设计 中 ， 需 要 把 整个 页 面 
想 要 看 到 的 那 一 部 分 。 


合击 localhostitestiinder htmlWindex | 

| 

首页 学 习 日 如 甘于 | 
Welcome! 学 习 日 记 ! 
GjQUerY a | 
J | SJQuery | 
write less, do more. 

JavaScript | 

版 要 全 加 | 


图 12.11 异步 加 载 Tab 页 面 效果 


/ 
文 内 容 、 页 脚 等 内 容 。 网 站 总 共 由 若干 页 面 组 成 ， 菜 单 上 每 个 链接 
单 时 ， 将 相应 地 转 到 该 链接 地 址 对 应 的 网 页 ， 需 要 将 整个 

| 
/ 


i 


本 例 页 面 主要 包括 页 头 、 导 航 菜单 、] 
都 连接 到 一 个 网 页 。 在 传统 的 网 页 设计 中 ， 当 单 击 菜 
网 页 加 载 进 来 显示 。 但 在 一 般 情况 下 ， 网 页 和 网 页 之 间 的 重复 信息 是 很 大 的 ， 如 页 头 、 导 

动态 加 载 网 页 内 容 是 完成 这 样 一 种 功能 : 当 单 击 沫 单 上 的 链接 时 ， 会 把 相应 的 内 容 加 载 到 正文 内 容 区 域 
显示 ， 至 于 页 面 的 其 他 部 分 则 保留 在 原 地 不 重新 加 载 。 页 面 基本 结构 如 下 : 

<div id="wrapper"> | 

<dlv 1d="styleswitcher"> | 

<U]> 
<li><a href—"index.html?style=black" rel="black" class="styleswitch"> 黑色 </a></li> 
<li><a href—"index.html?style=green" rel="egreen" class="styleswitch"> 绿色 </a></li> 
</ul> | 


菜单 和 页 脚 等 。 


</div> | 
<hl>Ajax Tab</h1> | 

<ul 1d—"nav"> 
<li><a class="current" href—"index.html"> 首页 </a></li> 
<li><a href="study.html"> 学 习 </a></li> | 
<li><a href="notes.html"> 日 记 </a></li> | 
<li><a hre 伍 "about.html"> 关于 </a></li> | 


</ul> 
<div 1d="content"> | 
<h2>Welcome!</h2> | 
<p><1meg src="1mages/3.Jpe" height="100" alt=""/></Pp> | 


</div> | 
<div id="foot"> 版 权 信 息 </div> | 
</div> | 
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整个 示例 网 站 主要 包括 以 下 页 面 : 

回 indexhtml: 网 站 的 人 口 页 面 。 

回 studyhtml: 内 容 页 面 之 一 ， 党 习 园 地 。 

加 ”notes.html: 内 容 页 面 之 二 ， 学 习 笔 记 。 

加 ”about.html: 内 容 页 面 之 三 ， 介 绍 页面 。 

每 个 页 面 的 布局 以 及 显示 可 以 参考 上 面 效 果 图 和 代码 结构 ， 只 是 在 内 容 显 示 上 稍 有 差别 。 读 者 可 以 日 
行 对 <div id="content"> 中 的 内 容 进 行 修改 。 

下 面 简单 分 析 一 下 如 何 加 载 内 容 。 注意 ， 每 个 页 面 上 的 主题 内 容 都 在 一 个 id 为 content 的 <div> 标签 内 。 
因此 在 动态 加 载 内 容 时 ， 每 次 只 需要 改写 此 content 模块 中 的 内 容 即 本。 定义 变量 toLoad 用 来 保存 每 次 需 
加 载 的 页 面 链 接 。 主 要 代码 如 下 : 

$(document).ready(function() { 

tunction pageload(hash) { 


if(hash) { 
$("#content").load(hash + ".html #content"): 
+ else { 
$("#content").load("index.html #content"): //default 
} 
} 
$.historyInit(pageload): 


$(#nav li a').click(function(){ 
$(#nav li a').filter(".current").removeClass("current"): 
$(this).addClass("current"): 


Var hash = $(this).attr( href): lie.g, study.html 
hash = hash.replace(/^.*#/, "): 

hash = hash.substr(0.hash.leneth-3): lie.g, study 
$(#content").hide('fast',loadContent):; 

$(#load'").remove(); 


$(#wrapper").append('<span id="load"> 加 载 中 ...</span>"): 
$(#load'").fadeIn('normal'): 
function loadContent() { 


$.historyLoad(hash): 
$(#content').show('normal"): 
$(#l0ad').fadeOut('normal'): 
} 
return false: 


#3 
}); 
load0 函数 用 于 加 载 网 页 内 容 ， 唯 一 的 参数 即 是 上 面 提 到 的 toLoad。 最 后 使 用 “return false:” 禁 用 click 
事件 默认 行为 总 


12.9 和 在线 练习 


12.8 节 案 例 演示 了 如 何 使 用 jQuery 设计 Tab 选项 卡 ， 实 现 异 步 加 载 外 部 文件 。 下 面 示例 
在 此 基础 上 ， 借 助 Cookie 技术 设计 皮肤 样式 切换 和 存储 。 感 兴趣 的 读者 可 以 扫 码 阅读 。 
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( 贸 d 视频 讲解 : 1 小 时 11 分 钟 ) 


]Query 允许 开发 人 员 扩 展 ]Query 功能 ， 这 种 开放 性 设计 模式 催生 了 无 数 ]QUery 插 
件 ， 目 前 金 球 有 成 千 上 万 种 满足 不 同 应 用 需求 的 插件 ， 使 用 这 些 插件 可 以 帮助 开发 人 员 
解决 各 种 Web 难题 ， 节 约 开发 成 本 。 本 章 将 讲解 如 何 自 定义 ]QUery 插件 ， 并 结合 案 便 
进行 实战 说 明 。 


【学 习 重 点 】 

| 了 解 JQuery 插件 设计 思路 。 

bp 党 可 ]Query 插件 开发 的 一 般 步 又 。 

P| 能 够 根据 需求 完善 JQuery 插件 功能 。 

P| 使 用 ]Query 插件 解决 Web 设计 中 的 代码 封装 。 


2 从 入 门 到 精通 ( 微 课 精 编 版 ) 


13.1 jQuery 插件 开发 基础 


jQuery 插件 主要 包括 两 种 形式 。 

回 jQuery 方法 : 把 一 些 常 用 或 者 重复 使 用 的 功能 绑 定 到 jQuery 对 象 上 ， 成 为 jQuery 对 象 的 一 个 扩展 
方法 ， 通 过 $.fp0 方式 进行 引用 。 目 前 ， 大 部 分 jQuery 插件 都 是 这 种 类 型 。jQuery 内 部 方法 也 多 
是 这 种 形式 ， 如 parent()、appendTo()、addClass0 等 方法 。 

回 jQuery 哺 数 :把 一 些 实用 功能 附加 到 jQuery 名 字 空 间 下 ， 作 为 一 个 公共 少数 被 使 用 ， 通 过 jQuery.fn0 
方式 进行 引用 。 例 如 ，jQuery 的 ajax0 方法 就 是 利用 这 种 途径 内 部 定义 的 全 局 图 数 。 


13.1.1 开发 规范 


jQuery 开发 团队 制定 了 通用 规范 ， 为 目 定 义 插 件 提供 一 个 通用 而 可 信 的 环境 。 因 此 ， 建 议 用 户 在 创建 
插件 时 遵守 这 些 规 则 ， 确 保 自 己 的 插件 与 其 他 代码 能 够 融合 在 一 起 ， 并 获得 广大 用 户 认 可 。 

1. 命名 规则 

自 定 义 插件 名 称 应 遵循 下 面 命名 规则 : 

Jquery. plug-Im name-.]s 


其 中 plug-in_name 表示 插件 的 名 称 ， 在 这 个 文件 中 ， 所 有 全 局 消 数 都 应 该 包含 在 名 为 plug-in_name 的 
对 象 中 。 如 果 捅 件 只 有 一 个 图 数 ， 则 可 以 考虑 使 用 jQuery. plug-in_name( 形式 。 

插件 中 的 对 象 方 法 可 以 灵活 命名 ， 但 是 应 保持 相同 的 命名 风格 。 如 果 定 义 多 个 方法 ， 建 议 在 方法 名 前 
添加 插件 名 前 级， 以 保持 清晰 。 不 建议 使 用 过 于 简短 的 名 称 ， 或 者 语义 含糊 的 缩写 名 ,或 者 公共 方法 名 ， 
如 setO 、get0 和 等， 这样 很 容易 与 外 部 的 方法 混淆。 

2.， 命名 空间 

所 有 新 方法 都 应 附加 到 jQuery.f 对 象 上 ， 所 有 新 函数 都 应 附加 到 jQuery 对 象 上 。 

3. this 关键 字 

在 插件 的 方法 或 函数 中 ，this 关键 字 用 于 引用 jQuery 对 象 。 为 了 确保 jQuery 链 式 语法 的 连贯 性 ， 所 有 
插件 在 引用 this 关键 字 时 ， 都 知道 接收 到 的 是 jQuery 中 的 哪个 对 象 。 

所 有 jQuery 方法 都 是 在 一 个 jQuery 对 象 的 环境 中 调用 的 ， 因 此 函数 体 中 this 关键 字 总 是 指 回 该 图 数 的 
上 下 文 。 

4. 匹配 元 素 迭 代 

使 用 this.each0 迁 代 匹配 的 元 素 ， 这 是 一 种 可 乱 而 有 效 地 迭代 对 象 的 方式 。 

出 于 性 能 和 稳定 性 考虑 ， 推 荐 所 有 的 方法 都 使 用 它 迭 代 匹 配 的 元 素 。 无 论 jQuery 对 象 实际 匹配 的 元 素 
有 多 少 ， 所 有 方法 都 必须 以 适当 方式 运行 。 一 般 来 说 ， 应 该 调用 this.each0 方法 来 迭代 所 有 匹配 的 元 素 ， 然 
后 依次 操作 每 个 DOM 元 素 。 


< 币 注意 : 在 this.each0 方法 体内 ，this 关键 字 不 再 引用 jQuery 对 象 ， 而 引用 当前 匹配 的 DOM 元 素 对 象 。 
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5. 返回 值 

除了 特定 需求 方法 外 ， 所 有 方法 都 必须 返回 jQuery 对 象 。 

如 需要 方法 返回 计算 值 或 者 某 个 特定 对 象 等 ， 一般 方法 都 应 该 返回 当前 上 下 文 环 境 中 的 jQuery 对 象 ， 
即 this 关键 字 引 用 的 数组 。 通 过 这 种 方式 ， 可 以 保持 jQuery 框架 内 方法 的 连续 行为 ， 即 链 式 语法 。 如 果 编 
写 打 破 链 式 语 法 的 插件 ， 它 就 会 给 用 户 开发 市 来 诸多 不 便 。 

如 果 匹 配 的 对 象 集合 被 修改 ， 则 应 该 通过 调用 pushStack0 方法 创建 新 的 jQuery 对 象 ， 并 返回 这 个 新 对 
象 ， 如 果 返 回 值 不 是 jQuery 对 象 ， 则 应 该 明确 说 明 。 

6. 方便 压缩 

插件 中 定义 的 所 有 方法 或 唤 数 ， 在 末尾 都 必须 加 上 分 号 (; )， 以 方便 代码 压缩 。 压 缩 JavaScript 文件 是 
最 佳 实践 。 

7 区别 jQuery 和 8$ 

在 插件 中 坚持 使 用 jQuery， 而 不 是 $。$ 并 不 总 是 等 于 jQuery， 这 个 很 重要 。 如 果 用 户 使 用 “var JQ = 
jQuery.noConflict0;” 更 改 jQuery 别名 ， 那 么 就 会 引发 错误 。 另 外 ， 其 他 JavaScript 框架 也 可 能 使 用 $ 别名 。 

在 复杂 的 插件 中 ， 如 果 全 部 使 用 jQuery 代替 $， 又 会 让 人 难以 接受 这 种 复杂 的 写法 ， 为 了 解决 这 个 问 
题 ， 建 议 使 用 如 下 插件 模式 。 

(function($){ 

/在 插件 包 中 使 用 $ 代替 jQuery 

DOUQuery); 

这 个 包装 函数 接收 一 个 参数 ， 该 参数 传递 的 是 jQuery 全 局 对 象 ， 由 于 参数 被 命名 为 $， 因 此 在 函数 体 
内 就 可 以 安全 使 用 $ 别名 ， 而 不 用 担心 命名 冲突 。 

上 述 这 些 规则 在 插件 代码 中 都 必须 遵守 ， 如 果 不 遵 守 这 些 插件 规则 ， 那 么 自己 开发 的 插件 就 得 不 到 广 
泛 应 用 和 推广 。 因 此 ， 尊 守 这 些 规则 非常 重要 ， 它 不 仅 保 证 插件 代码 的 统一 性 ， 还 能 增加 插件 的 成 功 概率 。 


13.1.2 设计 原理 


为 了 方便 用 户 创 建 插件 ，jQuery 月 定义 了 jQueryextend0 和 jQuery fn.extend0 方法 。 其 中 jQuery.extend0 
方法 能 够 创建 全 局 图 数 或 者 选择 舌 ， 而 jQuery fn.extend0 方法 能 够 创建 jQuery 对 象 方法 。 
【示例 1]】 在 jQuery 命名 空间 上 创建 两 个 公共 男 数 。 


jQuery.extend({ /扩展 jQuery 的 公共 函数 
minValue : function(a,b){ // 比较 两 个 参数 值 ， 返 回 最 小 值 
return a<b?a:b: 
}; 
maxValue : function(a.b){ / 比较 两 个 参数 值 ， 返 回 最 大 值 
return a<b2b:a: 
月 


然后 就 可 以 在 页 面 中 调用 这 两 个 公共 函数 。 在 下 面 这 个 示例 中 ， 当 单 击 按钮 后 ,浏览 带 会 弹出 提示 对 
话 框 ， 要 求 输入 两 个 值 ， 然 后 提示 两 个 值 的 大 小 。 


<script type="text/Javascript"> 
1/ 省略 jQueryminvalue0 和 jQuery.maxValue() 方法 创建 代码 
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$(function() { 
$("input").click(function() { 
var a 二 prompt(" 请 输入 一 个 数值 ? 由: 
varb = prompt(" 请 再 输入 一 个 数值 ? "): 
var c=]QuervyImInValue(a,bD ): 
var d = J]Query.maxValue(a.b): 
alert(" 你 输入 的 最 大 值 是 : "+ d+ "n 你 输入 的 最 小 值 是 : "+ c): 
)); 
1) 


</script> 
<input type="button" value="jQuery 插件 扩展 测试 " 放 


jQuery.extend0 和 jQuery.fn.extend0 方法 都 包含 一 个 参数 对 象 ， 该 参数 仅 接 收 名 / 值 对 结构 ， 其 中 名 表 
示 消 数 或 方法 名 ， 而 值 表示 函数 体 。 

jQuery.extend0 方法 除了 可 以 创建 插件 外 ， 还 可 以 用 来 扩展 jQuery 对 象 。 

【示例 2】 调 用 jQuery.extend0 方法 把 对 象 a 和 合并 为 一 个 新 的 对 象 ， 并 返回 合并 对 象 屿 但 给 变量 c。 
在 合并 操作 中 ， 如 果 存在 同名 属性 ， 则 后 面 参 数 对 象 的 属性 值 会 覆盖 前 面 参 数 对 象 的 属性 值 ， 在 下 面 示例 
中 把 对 象 a 和 b 合并 为 c， 合 并 对 象 如 图 13.1 所 示 。 


<SCIlpt type= "text]avascrlpt "> 


vara={ // 对 和 象 直接 量 
name : "zhu". 
pass : 123 
} 
var D= // 对 象 直接 量 
name : "Wane, 
pass : 456, 
age :1 
} 
var ¢ = jQuery.extend(a,b): // 合并 对 象 a 和 hb 
$(function(){ 


for(var name in c){ /遍历 对 象 c， 显 示 合 并 后 的 对 象 ec 的 具体 属性 和 值 
$("div").html($("div").htmlO + "<br />"+ name 十 ":" 十 c[name|]): 
} 
}) 
</script> 
<dv></div> 


二 a ES http://localhost/m 户 v 呈 | 全 test 


图 13.1 合并 对 象 
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【示例 3】 在 实际 开发 中 ， 第 用 jQuery.extend0 方法 为 插件 方法 传递 系列 选项 结构 的 参数 。 
tunction fn(options)1{ 
Var options = jQuery.extend({ /默认 参数 选项 列表 
namel : valuel. 
name2 : value2. 
name3 : value3 
}, options): // 使 用 函数 的 参数 害 盖 或 合并 到 默认 参数 选项 列表 中 
/ 因数 体 
} 


这 样 当 调 用 该 方法 时 ， 如 果 想 传递 新 的 参数 值 ， 就 会 禾 盖 默认 的 参数 选项 值 ， 或 者 向 靖 数 参 数 添 加 新 
的 属性 和 值 。 如 果 没有 传递 参数 ， 则 保持 并 使 用 默认 值 。 

【示例 4]】 在 下 面 几 个 函数 调用 中 ， 分 别传 入 新 值 ， 或 者 添加 新 参数 ,或 者 保持 默认 值 。 

fn({namel : value2. name2 : value3, name3 : valuel}): // 蕉 盖 新 值 


fhn({name4 : value4, names : values }): // 添加 新 选项 
fnO: // 保持 默认 参数 值 


jQuery.extend0 方法 的 对 象 合并 机 制 比 传统 的 逐个 检测 参数 不 仅 灵 活 且 简洁， 使 用 命名 参数 添加 新 选项 
也 不 会 影响 已 编写 的 代码 风格 ， 让 代码 变 得 更 加 直观 明日 。 


13.1.3 定义 jQuery 函数 


jQuery 内 置 的 很 多 方法 都 是 通过 全 局 也 数 实现 的 。 所 请 全 局 明 数 ， 就 是 jQuery 对 象 的 方法 ， 实 际 上 就 
是 位 于 jQuery 命名 空间 内 部 的 晴 数 。 

有 人 把 这 类 困 数 称 为 实用 工具 图 数 ， 它 们 有 一 个 共同 特征 ， 就 是 不 直接 操作 DOM 元 素 ， 而 是 用 这 些 隔 
数 来 操作 JavaScript 非 元 素 对 象 ， 或 者 执行 其 他 非 对 象 的 特定 操作 ， 如 jQuery 的 each0 函数 和 noConflictO 

ajax0 方法 就 是 一 个 典型 的 jQuery 全 局 函数 ，$.ajax0 所 做 的 一 切 都 可 以 通过 调用 名 称 为 ajax0 的 全 局 
图 数 来 实现 。 但 是 ， 这 种 方式 会 珊 来 困 数 冲突 问题 ， 如 果 把 函数 放置 在 jQuery 命名 空间 内 ， 就 会 降低 这 种 
冲突 ， 只 要 在 jQuery 命名 空间 内 注意 别 出 现 与 jQuery 其 他 方法 冲突 即 可 。 

使 用 jQuery.extend0 方法 可 以 扩展 jQuery 对 象 的 全 局 明 数 。 用 户 也 可 以 使 用 下 面 方法 快速 定义 jQuery 
全 局 明 数 。 

【示例 1】 针 对 13.1.2 节 示 例 1， 也 可 以 按 如 下 方法 进行 编写 。 

J]Query.minValue=function(a,b){ 


return a<b?a:b: 

be 

JQuery.max Value=function(a,b): 
return a<b?b:a: 

} 


如 果 向 jQuery 命名 空间 添加 一 个 函数 ， 只 需要 将 这 个 阴 数 指定 为 jQuery 对 象 的 一 个 属性 即 可 。 其 中 
jQuery 对 象 名 也 可 以 简写 为 $。 
考虑 到 jQuery 的 插件 越 来 越 多 ， 在 使 用 时 可 能 会 遇 到 日 己 的 插件 名 与 第 三 方 插件 名 发 生 冲 突 的 问题 。 
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为 了 避免 这 个 问题 ， 建 议 把 属于 自己 的 插件 都 封装 在 一 个 对 象 中 。 
【示例 2】 针 对 上 面 创建 两 个 的 全 局 函数 ， 可 以 把 它们 封装 在 自己 的 对 象 中 。 


jQuery.css8 = { 
minValue : function(a,b)1i 
returm a<b?a:b: 
4 
maxValue : function(a,b){ 
return a<b?b:a: 
} 
} 


尽管 仍然 可 以 把 这 些 也 数 当成 全 局 滑 数 来 看 待 ,但 是 从 技术 层面 分 析 ， 它 们 现在 都 是 全 局 jQuery 销 数 
的 方法 ， 因 此 在 调用 这 些 函 数 时 方式 会 发 生变 化 。 

var ¢ = JQuery.css8.minValue(a,b): 

var d = JQuery.css8.max Value(a,b): 

这 样 就 可 以 轻松 避免 与 其 他 插件 发 生 冲突 。 


< 秀 注意 : 即使 页 面 中 包含 了 jQuery 框架 文件 ， 但 是 考虑 到 安全 性 ， 不 建议 以 一 种 简写 的 方式 ( 即使 用 $ 代 
替 jQuery ) 进行 书写 ， 应 该 在 编写 的 插件 中 始终 使 用 jQuery 来 调用 jQuery 方法 。 


13.1.4 定义 jQuery 万 法 


| jQuery 大 多 数 功 能 都 是 通过 jQuery 对 象 的 方法 提供 的 ， 这 些 方法 对 于 DOM 操作 来 说 非 党 方便。 创建 
| jQuery 对 象 的 方法 可 以 通过 为 jQuery.fhn 对 象 添 加 方法 实现 。 实 际 上 上 ，jQnuery.f 对 象 就 是 jQuery.prototype 原 
型 对 象 的 别名 ,使 用 别名 更 方便 引用 。 
【示例 1】 下 面 函 数 是 一 个 简单 的 jQuery 对 象 方法 ， 当 调用 时 ,将 会 弹出 一 个 提示 对 话 框 。 
JQuery.fn.test = function(){ 
alert(" 这 是 jQuery 对 象 方法 ! "): 
} 


在 下 面 示例 中 ， 如 果 单 击 页 面 中 的 “jQuery 插件 扩展 测试 ”按钮 ， 弹 出 一 个 提示 对 话 框 ,提示 “这 是 
”jQuery 对 象 方法 ! ”。 


<script type="text/Javascript"> 


$(function(){ 
$("input").click(function|!{ / 绑 定 click 事 件 
$(this).testO: /在 当前 的 jQuery 对 象 上 调用 test0 方法 
入 
和 
</script> 


<input type="button" value="jQuery 插件 扩展 测试 " 放 > 
【示例 2】 定 义 jQuery 对 象 方法 时 ,方法 体内 的 this 关键 字 总 是 引用 当前 jQuery 对 象 ， 因 此 可 以 对 上 面 


es 90 。 


的 方法 进行 重 写 ， 


]Query.fn.test = functionO{ 
alert(this[0].nodeName): 


} 
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/ 提示 当前 jQuery 对 象 的 DOM 节点 名 称 


单 击 “jQuery 插件 扩展 测试 ”按钮 ， 就 会 弹出 当前 元 系 的 节点 名 称 ， 如 图 13.2 所 示 。 


在 上 面 示例 中 ,可 以 看 到 于 
向 当前 这 个 集合 。 因 此 ， 


13.1.5 ”匹配 元 素 


二 一 El http:/localhost/im PD ~ 尽 忆 是 站 
jQuery 摘 什 扩展 测 坯 


图 13.2 ”弹出 当前 元 素 的 节点 名 称 
于 jQuery 选择 天 返回 的 是 一 个 数组 类 型 的 DOM 节点 集合 ， 


显示 当前 元 素 的 节点 名 称 ， 必 须 在 this 后 面 指定 当前 元 素 的 序号 。 


this 指针 就 指 


如 果 jQuery 对 象 包含 多 个 元 素 ， 在 插件 中 该 如 何 准 确 指 定 当 前 元 紊 对象。 解决 方法 : 在 jQuery 对 象 方 


法 中 


调用 each0 方法 ,通过 隐 式 迭代 的 方式 ， 让 this 指针 依次 引用 每 个 匹配 的 DOM 元 素 对 象 。 


使 插件 与 jQuery 内 置 方 法 保持 一 致 性 。 
【示例 1】 针 对 13.1.4 节 示 例 做 进一步 的 修改 。 


J]Query.fn.test = function( ){ 
this.each(function(){ 


1 


} 


然后 ， 在 调用 该 方法 时 ， 
【示例 2】 下面 示例 设计 单 击 不 同 元 系 时 ， 


alert(this.nodeName): 


<script type="text/Javascript"> 


就 不 用 担心 jQuery 选择 需 所 


/遍历 所 有 匹配 的 元 素 ， 此 处 的 this 表示 对 象 集合 ， 即 jQuery 对 象 
/显示 当前 元 素 的 节点 名 称 ， 此 处 的 this 表示 元 素 对 象 


匹配 的 元 素 有 多 少 了 
显示 当前 元 素 的 节点 名 称 ， 如 


到 13.3 所 示 。 


jQuery.fhn.test = function(O { / 定义 的 jQuery 对 象 方法 
this.each(functionO{ /遍历 jQuery 对 象 
alert(this.nodeName): / 提示 当前 元 素 的 节点 名 称 
才 
1 
$(function() { 
$("body *").click(functionO{ /选择 body 元 素 下 的 所 有 元 素 
$(this).test(): / 为 当前 元 素 调用 test0 方法 ， 提 示 当 前 元 素 的 节点 名 称 
}); 
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1) 

</script> 

<input type="button" value="jQuery 插件 扩展 测试 " 伺 
<div>div 元 素 </div> 

<p>p 元 素 </p> 

<span>span 元 素 </span> 


六 


jQuery 岳 件 扩展 测试 


ai 


p 元 素 


span 元 率 


图 13.3 显示 当前 元 素 的 节点 名 称 


这 样 就 可 以 实现 根据 选择 器 所 匹配 元 素 的 不 同 ， 所 定义 的 test0 方法 总 能 够 给 出 不 同 的 提示 信息 。 

| 使 用 jQuery 的 用 户 习惯 于 链 式 语法 ， 也 就 是 说 在 调用 一 个 方法 之 后 ， 紧 跟着 调用 另 一 个 方法 ， 这 样 会 
。 使 代码 更 灵活 、 方 便 ， 也 符合 使 用 习惯 。 例 如 

| $(this).test() .hide().height(): 

要 实现 类 似 的 行为 连 写 功能 ， 就 应 该 在 每 个 插件 方法 中 返回 一 个 jQuery 对 象 ， 除 非 方法 需要 明确 返回 
” 值 。 返 回 的 jQuery 对 象 通常 是 this 所 引用 的 对 象 。 如 果 使 用 each0 方法 迭代 this， 则 可 以 直接 返回 迭代 的 


结果 。 
【示例 3】 针 对 示例 2 做 进一步 的 修改 。 
JQuery.fn.test = function(){ 
retum this.each(functionO{ // 返回 迭代 的 jQuery 对 象 
alert(this.nodeName); 
)); 
: 


然后 就 可 以 在 应 用 示例 中 实现 链 式 语法 了 。 
| 【示例 4】 在 下 面 示 例 中 ， 先 弹出 提示 框 ， 提 示 节 点 名 称 的 信息 ， 然 后 使 用 当前 节点 名 称 改 写 当 前 元 素 
内 包含 的 信息 ， 最 后 再 缓慢 隐藏 该 元 素 ， 如 图 13.4 所 示 。 
<script type="text/Javascript"> 
$(function(){ 
$("body *").click(function(){ 
$(this).test(O.html(this.nodeName).hide(4000): // 连 写 行为 


站 
}) 


</script> 


* 392 。 


第 ] 与 章 JQuery 挂件 


<div>div 元 素 </div> 
<p>p 元 素 </p> 
<span>span 元 素 </span> 


由 


Se http://localhost/m PD” @0 ‘Note 


图 13.4 ”jQuery 方法 连 写 演示 效果 


13.1.6 使 用 extend 


jQuery.extend( 方法 能 够 创建 全 局 函数 ， 而 jQuery.fn.extend0 方法 可 以 创建 jQuery 对 象 方法 。jQuery. 
fn.extend( 方法 仅 包含 一 个 参数 ， 该 参数 是 一 个 对 象 直 接 量 ， 以 名 / 值 对 形式 组 成 的 多 个 属性 ， 名 称 表示 
方法 和 名称， 而 值 表 示 畏 数 体 。 因 此 ， 在 这 个 对 象 直 接 量 中 可 以 附加 多 个 属性 ， 为 jQuery 对 象 同 时 定义 多 个 | 
方法 。 | 
【示例 1】 针 对 13.1.6 节 中 介绍 的 示例 ， 可 以 调用 jQuery.fn.extend0 方法 来 创建 jQuery 对 象 方法 。 


]Query.fn.extend( { 
test : function()1{ 
return this.each(function(){ 
alert(this.nodeName); 
}); 
| 
用 


【示例 2】 针 对 示例 1 定义 的 test0 方法 ， 同 样 可 以 在 jQuery 选择 枯 中 直接 调用 。 


<script type="text/Javascript"> 
$(function(O { 
$("body *").click(function(){ 
$(this).test(): // 调用 jQuery 对 象 方法 
}); 
}) 
</script> 


<div>div 元 素 </div> 


<p>p 元 紊 </p> 
<span>span 元 素 </span> 
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13.1.7 ”封装 插件 


封装 jQuery 插件 的 第 一 步 是 定义 一 个 独立 域 ， 代 人 码 如 下 : 
(function($)1{ 
1/ 自 定义 插件 代码 
GOQuery) // 封装 插件 
确定 创建 插件 类 型 ， 选 择 创建 方式 。 例 如 ,创建 一 个 设置 元 素 字 体 颜 色 的 插件 ， 应 该 创建 jQuery 对 象 
方法 。 考 虑 到 jQuery 提供 了 插件 扩展 方法 extend0 ， 调 用 该 方法 定义 捅 件 会 更 为 规范 。 


(function($){ 
$.extend($.fn,{ /jQuery 对 象 方 法 扩展 
/ 因数 列表 
}) 
POQuery) /封装 插件 


一 般 插 件 都 会 接收 参数 ， 用 来 控制 插件 的 行为 ， 根 据 jQuery 设计 习惯 ， 可 以 把 所 有 参数 以 列表 形式 封 
闭 在 选项 对 象 中 进行 传递 。 

【示例 1】 对 于 设置 元 素 字 体 颜 色 的 插件 ， 应 该 允许 用 户 设 置 字体 颜色 ， 同 时 还 应 考虑 如 果 用 户 没 有 设 
置 颜色 ， 则 应 确保 使 用 默认 色 进 行 设置 。 


四 
$.extend($.fn.{ /jQuery 对 象 方法 扩展 
color : function(options){ 1/ 上 自 定 义 插 件 名 称 


var options = $.extend( { // 人 参数 选项 对 象 处 理 
bcolor : "whbite'" 1// 背景 色 默 认 值 


fcolor: "black" / 前 景色 默认 值 
},0ptions); / 函数 体 
} 
}) 
人 WUQuery): /封装 插件 
最 后 ， 完 善 插 件 的 功能 代码 。 
rs 
$.extend($.fn,{ 
color : function(options){ 1// 自 定义 插件 名 称 
var options = $.extend( { // 参数 选项 对 象 处 理 
bcolor : "white", 1/ 背景 色 默 认 值 
fcolor : "black" / 前 景色 默认 值 
}.0ptions); 
retum this.each(function(O { /返回 匹配 的 jQuery 对 象 
$(this).css("color", options.fcolor): 1// 遍历 设置 每 个 DOM 元 素 字 体 颜 色 
$(this).css("backgroundColor", options.bcolor): ”// 遍历 设置 每 个 DOM 元 素 背 景 颜色 
月 
} 
月 
JUQuery): / 封 妆 插件 
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【示例 2】 完 成 搬 件 封装 之 后 ， 测 试 一 下 目 定 义 的 color0 方法 ,演示 效 来 如 图 13.5 所 示 。 


<script type="text/Javascript"> 


// 省 略 插 件 定义 
$(functionOf // 页 面 初始 化 
$("h1").color({ 1/ 设置 标题 的 前 景色 和 背景 色 
bcolor : "#eea", 
fcolor : "red" 
1 
州 
</ScTIDt> 
<hl> 标题 文本 </h1> 


Demerol "BN 


图 13.5 封装 jQuery 插件 


13.1.8 ”开放 参数 


优秀 的 jQuery 插件 ， 应 该 以 开放 性 的 姿态 满足 不 同 个 性 化 的 设计 要 求 ， 同 时 还 应 做 好 封闭 性 ， 避 免 外 
界 有 意 或 无 意 的 破坏 。 首 先 ， 考 虑 开放 插件 的 默认 设置 ， 这 对 于 插件 使 用 者 来 说 会 更 容易 使 用 较 少 的 代码 
履 盖 和 修改 插件 。 | 
【示例 】 以 13.1.7 节 示 例 代码 为 例 进行 说 明 ， 把 其 中 的 参数 默认 值 作为 $.fn.color 对 象 的 属性 单独 进行 
设计 ， 然 后 借助 jQuery.extend0 覆盖 原来 的 参数 选项 即 可 。 
(function($){ 
$.extend($.fn,1 
color : function(options){ 
var options = $.extend({}, $. 和 n.color.defaults, options): ”// 履 蓄 原来 的 参数 
return this.each(function(){ 
$+(this).css("color", options.fcolor): 
$+(this).css("backeroundColor", options.bcolor): 
) 
} 
!) 
$.fn.color.defaults = { / 独立 设置 $. 徊 .color 对 象 的 默认 参数 值 
bcolor : "white", 
fcolor : "black" 


} 
DUQuery); 
在 color0 函数 中 ，$.extend0 方法 能 够 使 用 参数 options 覆盖 默认 的 defaults 属性 值 。 如 果 没 有 设置 options 
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质 设 前 景色 和 背景 色 ， 


| 参数 值 ， 则 使 用 defaults 属性 值 。 由 于 defaults 属性 是 单独 定义 的 ， 因 此 可 以 在 页 面 中 
然后 就 可 以 多 次 调用 color0 函数 ， 演 示 效 果 如 图 13.6 所 示 。 


<script type="text/Javascript"> 


// 省 略 插 件 定义 
$(function(){ 
$.fn.color.defaults = { / 预 设 默 认 的 前 景色 和 硝 景 色 


bcolor : "#eea", 
fcolor : "red" 


} 
$C"h1").color(): / 为 标题 1 设置 默认 色 
$("p").color( {bcolor:"#ffr"}): 1 为 段落 文本 设置 默认 色 ， 同 时 覆盖 背景 色 为 白色 
$("div").color(): / 为 盒子 设置 默认 色 
加 
</script> 
<hl> 标题 文本 </h1> 
<p> 段落 文本 </p> 
<div> 盒子 </div> 


I us 


图 13.6 ”开发 jQuery 插件 的 默认 参数 设置 


通过 这 种 开发 插件 默认 参数 的 做 法 ， 用 户 不 再 需要 重复 定义 参数 ， 这 样 就 可 以 节省 开发 时 间 。 


”13.1.9 开放 功能 


| 
用 过 Cycle 插件 的 用 户 可 能 会 知道 ， 它 是 一 个 滑动 显示 插件 ， 支 持 很 多 内 部 变换 功能 ， 如 滚动 、 滑 动 、 
。 渐变 消失 等 。 实 际 上 ， 在 封装 插件 时 ， 无 法 把 所 有 功能 都 封装 进去 ， 也 没有 办 法 定义 滑动 变化 上 每 种 类 型 


的 变化 效果 。 但 是 Cycle 插件 通过 开放 部 分 功能 ， 人 允许 用 户 重 写 transitions 对 象 ， 这 样 就 可 以 添加 自 定义 变 
化 效果 ， 从 而 使 该 插件 满足 不 同 用 户 的 不 同 需 求 。 

Cycle 插件 开放 部 分 功能 的 代码 如 下 : 

$.fn.cycle.transitions = { 

/扩展 方法 

}; 

这 个 技巧 就 可 以 允许 其 他 用 户 能 够 定义 和 传递 变换 设置 到 Cycle 插件 。 

以 13.1.8 节 的 示例 为 基础 ， 为 其 添加 一 个 格式 化 的 扩展 功能 ， 这 样 用 户 在 设置 颜色 的 同时 ， 还 可 以 根 
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居 需 要 适当 进行 格式 化 功能 设计 ， 如 加 粗 、 斜 体 、 放 大 等 功能 操作 。 


(fnction($)1{ 
$.extend($.fn,{ 
color : function(options){ 
var options = $.extend({1, $.fn.color.defaults, options): // 苯 盖 原来 的 参数 
return this.each(function(){ 
$(this).css("color", options.tcolor): 
$(this).css("backeroundColor", options.bcolor): 


var html = $(this).html(): // 获取 当前 元 素 包 含 的 HTML 字符 串 
_html = $.fn.color.format(_ htm])); ”// 调用 格式 化 功能 蚂 数 对 其 进行 格式 化 
$(this).html( html): / 使 用 格式 化 的 HTML 字符 串 重 写 当前 元 素 内 容 
1) 
} 
}) 
$.fn.colordefaults = { /独立 设置 $.fn.color 对 象 的 默认 参数 值 
bcolor : "white", 
fcolor : "black" 
} 
$.fn.color.format = function(str){ 1/ 开放 的 功能 函数 
return str: 
后 | 
DUIQuery): / 


在 上 面 示例 中 ， 通 过 开放 的 方式 定义 了 一 个 format0 功能 函数 ， 在 这 个 功能 函数 中 默认 没有 进行 格式 
化 设置 ， 然 后 在 color0 陨 数 体内 利用 这 个 开放 性 功能 函数 格式 化 当前 元 素 内 的 HIML 字符 串 。 | 
【示例 】 调 用 color0 函数 ， 同 时 分 别 扩展 了 它 的 格式 化 功能 ， 演 示 效果 如 图 13.7 所 示 。 
<script type="text/Javascript"> 
// 省略 插件 定义 
$(function(O { 
$.fn.color.defaults = { 1/ 预 设 默 认 的 前 景色 和 背景 色 
bcolor : "#eea". 
fcolor : "red" 
3 
$.fn.color.format = function(str){ 1// 扩展 color0 插件 的 功能 ， 使 内 部 文本 加 粗 显示 
returmn "<strone>" + str + "</strone>": 
} 
$("h1").color(): 
$("p").color( {bcolor:"#fff"): 
$.fn.color.format = function(str){ /扩展 color0 插件 的 功能 ,使 内 部 文本 放大 显示 
return "<span style='font-size:30pX:>" + str + "</span>": 
3 
$("div").color(): 


1) 
</script> 


<hl> 标题 文本 </h1> 


<p> 段落 文本 </p> 
<div> 盒子 </div 
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图 13.7 开放 的 color0) 插件 


通过 上 述 技巧 ， 用 户 能 够 传递 目 己 的 功能 设置 ， 以 履 冀 插件 默认 的 功能 ， 从 而 方便 了 其 他 用 户 以 当前 
插件 为 基础 去 扩 写 插件 。 


13.1.10 ”隐私 保护 


优秀 的 插件 ， 不 仅仅 要 追求 开放 性 ， 还 应 该 留意 插件 的 隐私 性 。 对 于 不 应 暴露 的 部 分 ， 如 果 不 注 意 保 
护 ， 很 容易 被 外 界 入 侵 ， 破 坏 插 件 的 功能 。 因 此 ， 在 设计 择 件 时 必须 考虑 插件 实现 中 应 该 歇 锯 的 部 分 。 一 
旦 被 暴露 ， 就 需要 铭记 保持 任何 对 于 参数 或 者 语义 的 改动 也 许 会 破坏 向 后 的 莱 容 性 。 如 果 不 能 确定 应 该 梭 
露 特定 的 函数 ， 那 么 就 必须 考虑 如 何 进行 保护 的 问题 。 

当 插 件 包含 很 多 函数 ， 在 设计 时 希望 这 么 多 函数 不 影响 命名 空间 ， 
是 使 用 闭 包 。 为 了 创建 闭 包 ， 可 以 将 整个 插件 封装 在 一 个 函数 中 。 

【示例 】13.1.9 节 示 例 进行 讲解 ,为 了 验证 用 户 在 调用 color0 函数 时 所 传递 的 参数 合法 ,不妨 在 插件 中 
定义 一 个 参数 验证 函数 ， 但 是 该 验证 函数 是 不 允许 外 界 侵入 或 者 访问 的 ， 此 时 可 以 借助 闭 包 把 它 隐藏 起 来 

许 在 插件 内 部 进行 访问 。 
(function($)1{ 
$.extend($.fn,1 
color : function(options){ 

这 !filter(options))  /W/ 调用 隐私 方法 验证 参数 ， 不 合法 则 返回 
return this: 

Var options = $.extend({}, $.fn.color.defaults, options): 

retum this.each(function(){ 
$(this).css("color", options.fcolor): 
$(this).css("backeroundColor", options.bcolor): 


b 不 会 被 完全 暴露 ， 唯 一 的 方法 就 


var _html = $(this).html(); 

_html = $.fn.color.format( html): 

$(this).html( html): 

出 
} 

}); 
$.fh.color.defaults = { /省 略图 数 体 代 码 }:; 
$.fh.color.format = function(str){ /省略 困 数 体 代 人 码 }: 
function filter(options){ /定义 隐私 男 数 ， 外 界 无 法 访问 


/如 果 参 数 不 存 在 ， 或 者 存在 且 为 对 象 ， 则 返回 tue， 否 则 返回 false 
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return !options || (options && typeot options 一 二 "0Oblect")?true : false: 

} 
)GQuery): 
这 样 对 于 下 面 非法 参数 设置 ， 则 忽略 该 方法 调用 ,但 是 不 会 抛 出 异 第 。 
<script type="text/Javascript"> 
/ 省 略 插件 定义 
$(function() { 

$("p").color("#f"): 
月 


</script> 
<p> 段落 文本 </p> 
13.1.11 ” 非 破 坏 性 实现 
在 特定 情况 下 ，jQuery 对 象 方法 可 能 会 修改 jQuery 对 象 匹配 的 DOM 元素， 这 时 就 有 可 能 破坏 方法 返 


回 值 的 一 致 性 。 为 了 齐 循 jQuery 框 以 的 核心 设计 理念 ， 应 该 时 刻 警 惕 任何 修改 jQuery 对 象 的 操作 。 
【示例 1】 和 定义 一 个 jQuery 对 象 方法 parent0 ， 用 来 获取 jQuery 匹配 的 所 有 DOM 元 素 的 父 元 素 。 


(fanction($){ 
$.extend($.fn, { 
parent : function(options){ /扩展 jQuery 对 象 方法 ， 获 取 所 有 匹配 元 素 的 父 元 素 
var arr = [|]; 
$.each(this, function(index, value){ ”遍历 匹配 的 DOM 元 素 
ampush(value.parentNode): 1/ 把 匹配 元 素 的 父 元 素 推 入 临时 数组 
}): 
alT = $.unique(arr): /在 临时 数组 中 过 滤 重 复 的 元 素 
Tetum this.setArray(arD): /把 变量 ar 打包 为 数组 类 型 返回 
} 
}) 
HUQuery): 


在 上 面 jQuery 对 象 方法 中 ， 通 过 遍历 所 有 匹配 元 素 ， 获 取 每 个 DOM 元 素 的 父 元 素 ， 并 把 这 些 父 元 素 
存储 到 一 个 临时 数组 中 ， 通 过 过 滤 、 打 包 后 返回 。 

【示例 2】 调 用 示例 1 的 parent0 方法 为 所 有 p 元 素 的 父 元 素 添加 一 个 边框 ， 演 示 效 果 如 图 13.8 所 示 。 

<script type="text/Javascript"> 

/ 省略 jQuery 对 象 parent0 方法 定义 


$(functionO{ 
war Po Mr / 获取 所 有 Dp 元素， 并 存储 到 变量 $p 中 
$p.parent().css("border","solid 1px red"): // 调用 parent0 方法 获取 p 元 素 的 父 元 素 ， 并 设置 边框 样式 为 1 像 
// 素 宽 的 红色 实 线 
月 
</script> 


<div style="width:400px:height:200px:"> 大 盒子 
<p> 段落 文本 1</p> 
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<div style="width:200px:height:100px:"> 小 盒子 
<p> 段落 文本 2</p> 


| i 


te 如 果 在 设置 了 父 元 素 的 边框 后 ,希望 把 jQuery 对 象 匹 配 的 所 有 元 素 隐 藏 起 来 ， 则 可 以 添加 下 面 代码 ， 


</dIiv> 


在 浏览 器 中 预览 就 会 发 现 div 元 素 也 被 隐藏 起 来 ， 如 图 13.9 所 示 。 


$(function(){ 


DD /获取 所 有 了 元 素 ， 并 存储 到 变量 sp 中 
$p.parent( ).css("border","solid 1px red"); 


$p.hide(); 


}) 


/ 隐藏 所 有 p 元 素 ， 即 当前 jQuery 对 象 


1 


和 ET 全。 


图 13.8 ”调用 parent0 自 定义 方法 图 13.9 div 元 素 被 隐藏 起 来 
| 也 就 是 说 ， 在 上 面 代码 中 $p 变量 已 经 被 修改 ， 它 不 再 指向 当前 jQuery 对 象 ， 而 是 jQuery 对 象 匹配 元 
。 素 的 父 元 素 ， 因 此 为 gp 调用 hide0 方法 ， 就 会 隐藏 div 元 素 ， 而 不 是 p 元 素 。 
上 面 示例 仅仅 是 破坏 性 操作 的 一 种 表现 ， 如 果 要 避免 此 类 隐 性 修改 jQuery 对 象 的 行为 ， 建 议 采用 非 破 


坏 性 操作 。 


【示例 3】 使 用 pushStack0 方法 创建 一 个 间 


的 jQuery 对 象 ， 而 不 是 修改 this 所 引用 的 jQuery 对 象 ， 避 


免 了 这 种 破坏 性 操作 行为 ， 同 时 pushStack0 方法 还 允许 调用 end0 方法 操作 原来 jQuery 对 象 的 方法 。 


| (fanction($){ 


$.extend($.fn,{ 
parent : function(options)t{ 


} 
}) 
DOQuery); 


var alr = [|: 

$.each(this, function(index, value)!{ 
alr.push(value.parentNode): 

alT = $.unique(arr); 


retum this.pushStack(arr); 返回 新 创建 的 jQuery 对 象 ， 而 不 是 修改 后 的 jQuery 对 和 象 
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如 果 继 续 执 行 上 面 的 演示 示例 操作 ， 则 可 以 看 到 div 元 素 边 框 样式 被 定义 为 红色 ， 同 时 也 隐藏 了 其 包含 
的 p 元 系 ， 演 示 效 来 如 图 13.10 所 示 。 


3 


LS he/ocahowm Pad 
7 


图 13.10 使 用 非 破坏 性 的 parent0 方法 效 和 


针对 上 面 的 代码 ， 可 以 采用 链 式 语 法 进行 编写 。 
$(function() { 


Var $p = $("p"); 
$p.parent().css("border","solid 1px red").end().hide(): 


}) 
其 中 end0 方法 能 够 恢复 被 破坏 的 jQuery 对 象 。 也 就 是 说 ，parent0 方法 返回 的 是 当前 元 素 的 父 元 素 


的 集合 ， 现在 调用 end0 方法 之 后 ， 又 恢复 到 最 初 的 当前 元 素 集合 ， 此 时 可 以 继续 调用 方法 1 
jQuery 对 和 象 。 


13.1.12 ”添加 事件 日 志 


在 传统 开发 中 ， 软 件 都 包含 事件 日 志 ， 这 样 就 可 以 在 事件 发 生 时 或 发 生 后 进行 跟踪 。 在 JavaScript 程序 
调试 中 ,常常 使 用 alert0 方法 来 跟 踊 进程 ,但 是 这 种 做 法 影响 了 程序 的 正常 流程 ， 不 符合 频繁 、 实 时 显示 
事件 信息 。 可 以 模仿 其 他 软件 中 的 调试 台 log0 函数 ， 借 助 这 个 函数 将 事件 日 志 信息 输出 到 独立 的 日 志文 件 
中 ， 从 而 避免 中 断 页 面 交 互 进程。 

首先 ， 为 jQuery 对 象 添加 一 个 全 局 函数 log0。 在 这 个 函数 中 ,把 发 生 的 事件 信息 写 和 人 事件 日 志 包 含 
框 中 。 

]Query.log = function(msg){ 

Var html = jQuery('<div class="log"></div>'").text(mse):; 
J]JQuery(".logbox").append(html): 


} 
然后 ， 在 事件 中 调用 日 志方 法 ， 从 而 实时 跟踪 事件 发 生 时 的 类 型 ， 演 示 效 果 如 图 13.11 所 示 。 


<script type="text/Javascript"> 
/省 略 jQuerylog0 函数 
$(function(){ 
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$("input").click(function(event){ 
var e = event.type; 
$.log(e); 
9 
$("Input").mouseover(function(event){ 
var € = event.type; 
$.log(e); 
$("Input").mouseout(function(event) { 
| var e = event.type:; 


| $.log(e): 
人 

月 

| </script> 


| <input type="button" value=" 提交 按钮 " 广 
<dv class="logbox"></dIv> 


| 图 13.11 jQuery 事件 日 志 跟 踪 
| 【示例 1】 在 一 个 页 面 中 往往 会 包含 很 多 事件 示例 ， 如 果 分 别 进行 记录 ， 会 非常 不 方便 ， 为 此 可 以 定义 


”一 个 对 象 方法 ， 而 不 是 使 用 全 局 函数 。 

| (function($)1{ 

| $.extend($.fn, 1 

| log : function(msge){ 

| var html = JQuery(<div class="loe"></dIv>').text(msg): 
| retumn this.each(function(){ 

| JQuery(".logbox").append(html): 
| 

/ } 

| 月 

)GQuery): 


然后 在 实例 中 调用 该 日 志方 法 ， 演 示 效 果 如 图 13.12 所 示 。 


<script type=—"text/Javascript"> 

// 省 略 log0 对 象 方法 

$(function(){ 
$("h1").click(function(event) { 
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Var e = event.type; 
$(this).log(this.nodeName.toLowerCase() + "." + e); 
外 
$("p").mouseover(function(event)!{ | 
var e = event.type: | 
$(this).log(this.nodeName.toLowerCase() + "." + e); 


}); 
$("input").mouseout(function(event){ | 

Var e = event.type: | 
$(this).log(this.nodeName.toLowerCase() + "." + e): | 

}); | 

}) | 
</script> 


<hl> 标题 文本 <hl> 
<input type="button'" value=" 提交 按钮 " 廊 
<p> 段落 文本 </p> 
<div class="logbox"></dIv> 


= wl hitp://localhostim Dv 攻 蕊 
标题 文本 
提交 按钮 | 


段落 文本 
hl.click 


Input .mouseout 


input.mouscout | 
Input.mouseout | 
P.OoVver 

input.mouseout 


图 13.12 ”改进 jQuery 事件 日 志 跟 踪 


【示例 2】 进 一 步 改 善 log0 日 志方 法 的 灵活 度 ， 使 其 自动 搜索 最 近 显示 日 志 信 息 的 元 素 ， 通 过 利用 该 方 
法 的 语 境 ， 可 以 在 遍历 DOM 元 素 中 找到 距离 最 近 的 日 志 元 素 。 


(function($)1 | 
$.extend($.fn, { | 
log : function(msg)! | 
return this.each(tunction(){ | 

var $this = $(this): /获取 当前 元 素 | 
while($this.length) { // 如 果 存 在 当前 元 素 | 

var $logbox = $this.find(".logbox");// 在 当前 元 素 内 搜索 是 否 存在 日 志 元 素 | 
if($logbox.length){ 1/ 如 果 存 在 日 志 元 素 ] 

var html = JQuery(<div class="log"></dIv>').text(mseg); 

$logbox.append(htm!l): | 

break: / 跳出 检索 | 

} | 

$this =  $this.parent(): // 检索 上 一 级 匹配 元 素 
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}) 
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还 可 以 改善 参数 的 处 理 机 制 ， 考 虑 到 log0 方法 


1 从 入 门 到 精通 ( 微 课 精 编 版 ) 


只 能 简单 地 接收 字符 串 型 信息 ， 


如 果 要 向 log0 方法 传 


递 更 多 信息 ， 就 会 变 得 无 能 为 力 。 

【示例 3】 遵循 jQuery 一 贯 设计 思想 ， 可 以 考虑 允许 用 户 以 对 象 列表 的 形式 向 log0 方法 传递 更 多 甚至 
无 限制 的 信息 。 因 此 ， 还 需 对 log0 方法 中 的 参数 处 理 机 制 进行 改善 。 如 果 用 户 向 其 传人 对 象 类 型 的 参数 ， 
则 直接 调用 它 ， 将 会 显示 [object object] 的 字符 串 ， 显 然 这 并 不 是 期 望 的 日 志 信 息 。 

(fnction($){ 

$.extend($.fn,{ 
log : function(mse){ 
lf(typeot msg == "object"){ // 如 果 参 数 为 对 象 类 型 ， 则 解析 该 对 象 包含 的 信息 
var str ="{ "; 
$.each(mseg, function(name, value){ 1// 裔 历 对 象 成 员 
str 二 name 十 ": "十 Value 十 "”,"”: 
}): 
str = strsubstring(0.strlength-2): // 清除 最 后 一 个 成 员 的 逗号 
str+=" }"; 
mseg = Str: // 把 解析 的 对 象 信息 返 给 参数 变量 
} 
return this.each(function(){ 
var $this = $(this): 1/ 获取 当前 元 素 
while($this.length){ // 如 果 存 在 当前 元 素 
var $logbox = $this.find(".logbox"); /在 当前 元 素 内 搜索 是 否 存 在 日 志 元 素 
if($logbox.length)t // 如 果 存 在 日 志 元 素 
var html = JQuery('<dI1v class="loe"></dIv>").text(mse): 
$logbox.append(htm)): 
break: / 跳出 检索 
} 
$this = $this.parentO: / 检索 上 一 级 匹配 元 素 
3 
FE 
} 
}) 
PUQuery): 


这 样 就 可 以 在 log0 方法 中 传人 更 多 的 信息 ， 


<script type="text/Javascript"> 
// 省 略 的 log0) 方法 
$(function(){ 
$("h1").mouseout(function(event) { 
3(this).log( 


nodeName : this.nodeName.toLowerCase(), 


event lype : event.type 
})); 


当然 也 可 以 直接 传人 字符 串 信 息 ， 应 
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1); 
$("p").mouseover(function(event){ 
$(this).log( 
nodeName : this.nodeName.toLowerCasel(), 
eventIype : event.type 
}); 
上: 
$("input").click(function(event){ 
Var e = event.type; 
$(this).log(this.nodeName.toLowerCase() + "." + e); 


}); 
}) 


</script> 


<hl> 标题 文本 </h1> 

<input type="button" value=" 提交 按钮 " 广 
<p> 段落 文本 </p> 

<div class="logbox"></dIv> 


演示 效果 如 图 13.13 所 示 。 


并 


| htpocalhosm pc 介 认 六 
标题 文本 


| 


段落 文本 


{ nodeName : hl, eventType : mouseout } 
{ nodeName : P eventType : mouseover } 
input.click 
{ nodeName : hl, eventType : mouseout } 
{ nodeName : p, eventType : mouseover 上 
input.click 


4 nodeName ; hl, cventType : mouscout } 


图 13.13 ”完善 log0 日 志方 法 的 参数 处 理 


13.1.13 简化 设计 


在 jQuery 框架 中 ， 可 以 看 到 很 多 功能 相近 ， 但 用 法 索 简 不 一 的 方法 。 例 如 ，ajax0 方法 能 够 解决 所 有 | 
异步 通信 问题 ， 但 是 jQuery 在 ajax0 方法 的 基础 上 又 定义 了 load0、getO0 、getUSONO 、getScript0 等 方法 ， 
这 是 基于 特定 方法 上 的 一 种 简化 式 搬 件 设计 方法 。 类 似 的 还 有 bind0 方法 ， 以 及 作者 为 每 种 事件 类 型 单独 
定义 的 绑 定 方法 ， 如 click0 、mouseover0 等 方法 。 

如 果 发 现 某 段 代码 需要 多 次 重复 使 用 ， 或 者 多 次 重复 调用 某 个 方法 ， 不 妨 思考 在 这 个 方法 基础 上 创建 | 
一 种 简写 形式 ， 或 者 挑选 出 对 项 目 开 发 有 用 的 方法 ， 并 省 略 jQuery 中 那些 无 关 或 者 烦琐 的 方法 。 这 样 就 可 | 
以 提高 工作 效率 ， 优 化 代码 结构 。 | 

animate( 是 jQuery 动画 的 基础 ， 很 多 方法 都 是 从 该 方法 


延伸 出 来 的 。 在 设计 动画 时 ， 经 常会 把 滑动 显 
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” 示 和 隐藏 与 渐 显 和 渐 隐 动 画 混 合 在 一 起 设计 。 
” 【示例 】 直 接 使 用 animate0 方法 进行 设计 ， 如 果 频 繁 操作 ， 就 感觉 比较 耗 时 。 
| <script type="text/Javascript"> 


$(function(){ 
$("input").eq(0).click(function(){ 
$("div").animate({ / 淡出 收 起 
height :"hide", 
opacity :"hide" 
+},"slow"): 
}) 
$("input").eq(1).click(function(){ 
$("div").animate( { 1// 淡 人 展开 
helght :"show", 
opacity :"show" 
},"slow"): 
}) 
1) 
</script> 


<input type="button" value=" 渐 隐 收 起 " /><input type="button" value=" 汤 显 展开 " 廊 

<dv style="height:200px:; width:300px: backeround-color:blue: border:solid 1px red:"></div> 
| 把 上 面 的 动画 演示 功能 封装 起 来 ， 定 义 为 jQuery 对 象 方法 。 为 了 与 jQuery 默认 的 简写 动画 方法 保持 一 
” 致 ， 设 计 这 两 个 方法 的 参数 分 别 为 自 定义 速度 和 回调 函数 。 


| (fanction($){ 
| $.extend($.fn,{ 
showlIn : function(speed., fn){ 
return this.animate( { 
heieht :"show", 
opacity :"show" 
},speed,fn); 
3 
hideOut : function(speed, fh){ 
retum this.animate( { 
height :"hide", 
opaclty :"hide" 
},speed,fn); 
} 
}) 
PUQuery); 


| 在 上 面 代码 中 ，this 关键 字 引 用 当前 上 下 文 的 jQuery 对 象 ， 因 此 可 以 直接 调用 jQuery 目 定 义 动 画 方法 
animate()。 然 后 ， 就 可 以 直接 为 div 元 素 调 用 showIn0 方法 和 hideOutO 方法 。 
$(function() { 
$("input").eq(0).click(function(}){ 
$("div").hideOut(4000): 
}) 
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$("input").eq(1).click(function(O { 
$("div").showIn(4000): 
!) 
1) 


13.2 案例 实战 : 设计 文字 提示 插件 


下 面 将 通过 一 个 小 型 而 实用 的 jQuery 插件 ， 帮 助 谈 者 快速 笃 握 扩展 jQuery 功能 的 方法 和 操作 步骤 。 这 
个 插件 实现 当 鼠 标清 过 链接 出 现 文 字 提 示 ， 提 示 框 的 背景 颜色 可 以 目 由 控制 。 


13.2.1 功能 讲解 
本 案例 将 实现 以 下 功能 : 
名 ”鼠标 经 过 目标 对 象 时 会 显示 带 有 title 属性 的 容器 ， 呈 现 title 属性 值 包含 的 文本 内 容 ， 目 标 对 象 一 


般 是 链接 , 图 片 等 。 
四 可 以 控制 提示 框 的 背景 颜色 。 


13.2.2 构建 结构 


新 建 HIML 文档 ， 构 建 一 个 简单 的 列表 导航 结构 ， 代 人 码 如 下 : 


<dv 

<h2> 推荐 9 个 jQuery 手风琴 菜单 插件 </h2> 

<ol> 

<]i><a href="http://www.scriptocean.com/accordion.html" title=" 类 似 RIA 之 家 的 导航 区 域 的 效果 " class= 
"red">Javascript Accordion Menu Wizard</a></]1> 

</ol> 
</div> 
在 上 面 结构 中 最 重要 的 是 title 属性 ， 该 属性 用 于 控制 提示 框 出 现 的 内 容 。class="blue" 类 样式 用 于 控制 


提示 框 的 背景 颜色 。 当 鼠标 第 一 次 滑 过 列表 项 中 茶 个 链接 对 和 象 时 ， 会 创建 类 似 下 面 的 提示 框 容 需 。 


<a href—"http://berndmatzner.de/Jquery/hoveraccordion/" title="Reeular and Hover Accordion Menus" class="blue"> 
Regular and Hover Accordion Menus 
<span class="colorTip" style="mareimn-lett: -60px:"> Reeular and Hover Accordion Menus 
<span class="pomty TipShadow"></span> 
<span class="pomty Tip"></span> 
</span> 
</a> 


13.2.3 ”设计 已 
jQuery 插件 设计 一 般 都 遵循 固定 的 模板 ， 模 板 如 下 : 
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(fnnction($){ 
$.fh. 插件 名 = fonction(settings){ 
/默认 参数 
Var defaultSettines = { 


L 
上 合并 默认 参数 和 用 户 自 定义 参数 
settings = $.extend(defaultSettings,settings): 


return this.each(function(){ 
I 
} 
DOQuery); 
这 是 最 基础 的 jQuery 插件 结构 。 先 来 看 模板 中 的 如 下 代码 : 
(function($)1{ 
OQuery); 


上 面 代码 其 实 是 用 于 创建 一 个 匿名 函数 。 读 者 应 该 对 JavaScript 闭 包 有 所 了 解 ， 如 果 对 匿名 函数 和 闭 包 
不 了 解 ， 将 会 对 这 种 代码 非常 疑惑 ， 建 议 阅读 JavaScript 匿名 了 肾 数 及 函数 的 闭 包 相关 知识 。 
模板 中 匿名 函数 的 作用 是 用 来 保护 $ 这 个 变量 ， 避 免 $ 变量 与 页 面 中 的 全 局 变量 冲突 。 这 点 非常 重要 ， 
$ 变量 名 在 网 页 脚本 中 使 用 率 非 常 高 ， 用 户 一 般 无 法 保证 所 引入 的 其 他 JavaScript 插件 或 者 代码 都 是 用 $ 来 
代表 jQuery。 
jQuery 是 jQuery 库 定义 的 一 个 全 局 变量 ， 而 $ 变量 名 相当 于 jQuery 的 简写 ，$ 冲突 率 是 非常 高 的 ， 不 
同 的 JavaScript 框架 ，$ 有 不 同 的 含义 ， 但 如 果 使 用 jQuery， 那 又 会 非常 烦琐 。 上 面 匿名 因数 创建 了 闭 包 ， 
意味 看 在 这 个 闭 包 内 可 以 任意 使 用 $ 变量 ， 不 用 担心 冲突 的 问题 。 同 时 将 jQuery 这 个 全 局 变量 传人 匿名 天 
数 ， 并 执行 匿名 函数 。 
在 第 二 行 代 公 中 ，$. 血 与 jQuery 血本 奈 上 可 以 等 于 jQueryprototype。prototype 表示 原型 继承 ，prototype 
在 JavaScript 中 极其 重要 ， 是 JavaScript 实现 面向 对 和 象 编程 的 关键 。 以 colorTip 为 例 : 
(function($){ 
$.fh.colorTip= function(settings){ 
alert(1):; 
} 
入 : 
上 面 代 码 实 际 上 给 jQuery 扩展 了 一 个 名 为 colorTip 的 方法 ， 接 下 来 就 可 以 按 如 下 方法 调用 执行 该 方法 。 
(fonction($){ 
$(0a).colorTipO: 
入 : 
在 $.fn.colorTip 中 ，this 上 下 文 就 会 指向 $(a') 这 个 对 象 。 
在 接 下 来 的 代码 中 ，$.extend 在 jQuery 插件 开发 中 有 个 很 重要 的 作用 ， 就 是 用 于 合并 参数 。 以 colorTip 
为 例 ， 先 定义 默认 参数 对 象 defaultSettings， 然 后 把 用 户 调用 插件 时 传递 的 参数 禾 盖 默认 人 参数， 实现 参数 
合并 。 
(function($){ 
var defaultSettings = { 
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/ 颜色 

color : 'yellow,, 
// 延迟 

timeout : S00 


} 
/ 提示 框 的 颜色 
var supportedColors = |Ted .preen .blue wblte'., yellow'.Dlack |: 
片 合 并 默认 参数 和 用 户 自 定义 参数 */ 
settings = $.extend(defaultSettimgs.settimgs): 
I 


$('a").colorTip( {color:'blue'} ):; 


如 果 运 行 以 上 代码 ， 就 会 发 现 弹出 的 值 为 blue， 而 不 再 是 默认 的 yellow。"“$.extend(defaultSettings,settings);” 
的 含义 是 使 用 settings 来 窗 新 defaultSettings ( 同名 键 值 )。 实 际 上 ，extend0 不 只 接收 两 个 参数 ， 相 对 于 模 
板 上 的 写法 ， 还 可 以 按 如 下 方法 编写 : | 

settings = $.extend({},defaultSettings,settings): 

即 不 去 窗 新 defaultSettings( 默认 参数 )， 而 是 合并 到 一 个 空 对 象 上 。 

接 下 来 增加 一 个 animate 参数 ， 这 个 参数 也 是 对 象 类 型 : 

var defaultSettines = { 


/颜色 

color : 'yellow,, 

// 延迟 

timeout : $00, 

animate :{type:"ftade",speed:"fast"} 
} 
调用 如 下 : 


$('a').colorTip( {color:'yellow',animate: {type:"slide"} }):; 


在 “settings = $.extend({1,defaultSettings,settings);:” 下 加 上 : 

alert(settings.animate.speed): 

按理 说 ， 应 该 得 到 的 是 fast， 实 际 上 是 undefined。 原 因 是 animate 是 对 象 ， 不 开局 深度 复制 ，extend0 
方法 就 会 直接 覆盖 。 此 时 可 以 使 用 下 面 代码 进行 合并 : | 

settings = $.extend(true,defaultSettings,settings): | 

alert(settings.animate.speed): 

这 样 就 会 得 到 fast 返回 值 。 

在 最 后 几 行 代码 中 ， 应 该 明白 下 面 几 个 问题 : 

return this.each(function( ){ 


/ 代码 
}); 
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阿 this 指 代 什么 ? 
$([atle|).colorTP(fcolor "yellow ): 


那么 这 里 this 实际 上 有 是 指向 $C[title])。 

加 ”为 什么 使 用 return ? 

this.each0 执行 完 后 返回 的 是 this， 这 时 候 再 输入 return this.eachO0， 返 回 的 依旧 是 this， 而 这 个 this 上 
下 文 又 是 指 代 $([title])， 意 味 着 用 户 可 以 在 colorTip0 后 继续 加 其 他 方法 ， 例如: 


$C [fttlel).colorTip( {color:'yellow’'} ).size(): 


回 ”为 什么 要 使 用 each ? 
先 看 下 面 代码 : 
$([title]").colorTip( {color:'yellow'} ): 


$CTtitle]) 很 明显 是 一 个 对 象 集合 ， 即 所 有 带 有 tite 属性 的 容器 都 能 出 现 提示 杠 ， 所 以 就 需要 遍历 
$('title]) 对 象 。 


13.2.4 难点 突破 


该 插件 脚本 实现 比较 简单 ， 难 点 是 如 何 实 现 可 以 目 由 控制 颜色 的 提示 框 。 要 控制 提示 框 主体 的 边框 颜色 
和 背景 颜色 日 然 不 难 ， 难 在 如 何 自 由 控制 三 角形 部 分 的 颜色 。 通 过 分 析 ， 用 户 会 发 现 只 有 使 用 纯 CSS 设计 
的 三 角形 ， 才 可 以 自由 控制 其 颜色 。 这 里 就 需要 用 到 一 个 CSS 技巧 : 使 用 CSS 中 的 border 属性 设计 三 角形 。 
结构 如 下 : 
<span class="colorTip" style="mareimn-lett: -60px:"> Reeular and Hover Accordion Menus 
<span class="pomntyTipShadow"~></span> 
<span class="pomnty Tip"=</span> 
</span> 


其 中 <span class-"pointyTipShadow"> 和 <span class-"pointyTip"> 是 两 个 空 的 标签 ， 它 们 的 作用 是 设 
计 三 角形 ,<span class="pointyTip"> 三 角 宽 度 为 12pxX， 颜 色 与 提示 框 主 体 背 景 颜色 一 样 ， 而 <span class= 
"pointyTipShadow"> 三 角 宽 度 为 14pxX， 放 在 <span class="pointyTip"> 的 下 面 ， 颜 色 与 提示 框 主 体 边 框 颜色 
一 样 ， 就 产生 了 边框 错觉。 

然后 通过 CSS 设计 三 角形 样式 ， 代 码 如 下 ， 

.colorTip { display:none: position:absolute: left:$0%: top:-30pX: paddme:6px 12px: backeround-color:white: tont-slze:12DX: 
font-style:normal: line-height:1: text-decoration:none: text-alien:center: text-shadow:0 0 lpx white: white-space:nowrap: 
-moz-border-radius:4px: -webkit-border-radius:4px: border-radius:4px: } 

.pomntyTip, .pontyTipShadow { border:6px solid transparent: bottom:-12px: helght:0: lett:$0%:; marein-lett:-6px: 
position:absolute: width:0: } 

.pomtyTipShadow { border-width:7px: bottom:-14px: margin-lett:-7px: } 

.colorTipContamer { position:relative; text-decoration:none !Important: } 


代码 看 上 去 不 少 ， 其 实 只 要 理解 border 生成 三 角形 ， 剩 下 的 代码 主要 还 是 用 于 调整 位 置 。 整 个 CSS 样 
式 代 码 请 参考 本 节 示 例 源 代码 。 
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13.2.5 代码 实现 


解决 了 颜色 控制 这 个 难点 ， 接 下 来 代码 实现 难度 就 不 大 了 ， 详细 说 明 如 下 。 
1. 设置 参数 
本 插件 需要 提供 两 个 参数 : 颜色 和 隐藏 提示 框 的 延迟 时 间 。 当 然 ， 可 以 根据 需要 提供 更 多 的 配置 参数 。 


Var defaultSettines = { 


color : yellow' / 颜色 
timeout : 500 // 延迟 


} 
语 合 并 上 默认 参数 和 用 户 自 定义 参数 */ 
settings = $.extend(defaultSettings,settings); 


2. 创建 数组 
创建 一 个 包含 所 有 颜色 信息 的 数组 ， 代 人 码 如 下 。 
/ 提示 框 的 颜色 


var supportedColors = |Ted. green blue， whlte. yellow' ,black |: 


3. 设计 定时 娠 
本 插件 需要 定义 一 个 定时 姑 ， 这 个 定时 做 用 于 当 鼠 标 移 开 目 标 容 髓 时 ， 多 长 时 间 隐 藏 提示 框 。 
认定 时 器 类 状 
function eventScheduler(){} 
eventScheduler.prototype = { 
set : function (func.timeout) { // 添加 定时 人 般 
this.timer = setTimeout(func,timeout): 
}, 
clear: function(O){ / 清理 定时 器 
clearTimeout(this.timer):; 
} 
} 


eventScheduler 类 结构 人 简单， 该 类 型 包含 两 个 原型 方法 ; setO 用 来 添加 定时 器 ，clear0 用 来 清理 定时 器 。 
4. 设计 提示 框 ] 
创建 提示 框 类 Tip， 该 类 型 包含 两 个 本 地 属性 ， 即 content 和 shown， 其 中 content 定义 提示 框 包含 的 
文本 内 容 ，shown 表示 一 个 开关 按钮 ， 定 义 是 否 显 示 提 示 框 。 同 时 该 类 型 还 包含 三 个 原型 方法 : generate0 、 
show() 和 hideO。 
片 提示 类 *#/ 
function Tip(txt){ 
this.content = txt: 
this.shown = false: 


} 
Tip.prototype = { 
generate: function(O{ /产生 提示 框 
return this.tip || (this.tip = $(<span class="colorTip">"+this.content+'<span class="pointyTipShadow"></Span> 
<span class="pomty Tip"></span></span>'")); 
间 
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show: functionO{ // 显示 提示 框 
if(this.shown) Tetumn: 
this.tip.css('marein-lett',-this.tip.outer Width()/2).fadeIn('tast'): 
| this.shown = true: 
| le 


Note | hide: 0 // 隐藏 提示 框 
| .tip.fadeOut(): 
| this.shown = false: 
} 


| < 角 注意 : Tip 和 eventScheduler 类 都 是 在 $.fn.colorTip 函数 体外 定义 的 ， 可 以 自由 调用 ， 但 是 它们 都 是 私 
有 类 型 ， 外 界 是 无 法 访问 的 。 


5. 设计 Colortip 代码 
首先 ， 需要 实例 化 Tip 和 eventScheduler 类 。 


// 实例 化 eventScheduler ( 定时 器 ) 

var scheduleEvent = new eventScheduler(); 
/实例 化 Tip (提示 类 ， 产生 、 显 示 、 隐 藏 ) 
var tp = new Tip(elem.attr('title’)): 


然后 ， 产 生 提 示 框 ， 将 提示 框 加 入 目标 容 涡 ， 并 给 提示 框 父 容 表 添加 样式 。 
elem.append(tp.generate().addClass(colorIIipContalner ): 


再 检查 提示 框 父 容 需 是 否 有 颜色 样式 ， 这 里 只 需 给 设 有 颜色 样式 的 目标 容器 ， 加 人 默认 的 颜色 样式 
| ee 
(黄色 )。 


| var hasClass = false: 
| for(var i=0:i<supportedColors.leneth:i++){ 
if(elem.hasClass(supportedColors[1|)){ 
hasClass = true: 
break: 
} 


} 

// 如 果 没 有 ， 使 用 默认 的 颜色 

if(!hasClass){ 
elem.addClass(settines.color); 

} 


最 后 ,给 目标 容器 添加 鼠标 滑 过 事件 。 设 计 当 鼠标 滑 过 提示 框 父 容器 时 ， 显 示 提示 框 ， 而 鼠标 移出 ， 
。 则 隐藏 。 
elem.hover(function(){ 

tip.show'(): 

// 清理 定时 带 

scheduleEvent.clear(); 

},function(O){ 
// 启动 定时 带 
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scheduleEvent.set(function(){ 
tip.hide(): 
+},settings.timeout): 
| 
// 删除 title 属性 | 
elem.removeAttr('title’): 


至 此 ，Colortip 插件 代码 设计 全 部 结束 ， 该 插件 能 够 目 由 控制 提示 框 颜色 ， 但 Colortip 还 存在 不 少 的 局 
限 性 ， 只 能 满足 基本 的 应 用 ， 这 里 仅 作 为 学 习 案 例 帮助 读者 快速 掌握 jQuery 插件 的 一 般 开发 过 程 。 整 个 振 
件 的 完整 代码 请 参考 本 节 示 例 源码 。 


13.2.6 ”应 用 插件 


案例 演示 效果 如 图 13.14 所 示 。 


$(function(){ 
$C [titlel').colorTip( {color:'yellow'! ); | 


1) 


se -| 过 htp:j/ocalho. - 明 必 | 过 


推荐 9 个 jQuery 手风琴 菜单 插件 | 


.Jiuery UT accordion 

initMen3. 1 

Makimg Accordion Mennm Using jhery 
， 襄 ueTry Accordion Menu | 
jneTy 一 Horizontal Mccordion | 
JueTY Examples 一 Horizontal Accordlon 


， Javascript iccordion MEnum Wizard 


1 

2. 

3. 

4 

3. 

6. 

了 

岛 ，: 
9 


| ER i a rT | | 
hp rm,scriptoceancom accordion.html 
| 


图 13.14 应 用 目 定 义 插 件 colorTipO 


13.3 在 线 练 习 


多 个 页 面 操作 和 案例， 感 兴 直 


的 读者 可 以 扫 码 阅读 。 
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案例 实战 : 使 用 jQuery 设计 微 博 系统 


微 博 是 近年 比较 流行 的 一 种 Web 2.0 的 网 络 媒体 形式 ， 它 与 善 通 的 博客 很 像 ， 但 
是 每 次 只 能 书写 很 短 的 内 容 ， 功 能 类 似 于 即时 通信 工具 ， 可 以 说 妃 是 QQ 和 博客 的 混合 
体 。 本 章 将 介绍 如 何 使 用 ]Query 结合 PHP 实现 一 个 简易 版 的 微 博 系 统 。 


第 ]4 章 染 例 实战 : 使 用 JQUery 设计 微 博 系 统 


14.1 设计 思路 


微 博 是 一 种 可 以 即时 发 布 消 息 的 类 似 博客 的 系统 ， 是 即时 信息 的 一 个 变种 。 在 征 博 上 ， 人 允许 用 户 将 自 
己 的 最 新 动态 和 想法 以 短 消息 的 形式 发 送 给 手机 和 个 性 化 网 站 群 ， 而 不 仅仅 是 发 送 给 个 人 。 博 客 的 概念 已 
经 流行 了 很 久 ,， 但 渐渐 地 大 家 也 发 现 了 很 多 不 足 。 例 如 ， 写 大 段 的 文章 比较 困难 ， 小 段 的 又 缺少 内 涵 ， 不 
容易 与 博客 的 主题 契合 ， 于 是 微 博 开 始 流行 。 

微 博 最 大 的 特点 就 是 集成 化 和 开放 化 ， 用 户 可 以 通过 手机 、IM 软件 和 外 部 API 接口 等 途径 向 自己 的 微 
博 发 布 消息 。 微 博 的 另 一 个 特点 还 在 于 这 个 “ 微 ” 字 ,一般 发 布 的 消息 只 能 是 只 言 片 语 ， 一 般 的 微 博 系统 
每 次 只 能 发 送 100 一 200 个 字符 。 如 图 14.1 所 示 是 新 浪 微 博 网 站 的 页 面 。 


41246092 135335 
粉丝 币 博 


人 听见 钟 前 来 自 人 民 网 微 博 
【少年 曾 患 病 几 近 和 失聪 如 今 被 中 国 音乐 学 院 录 取 】 从 小 襄 欢 音乐 的 小 光 7 宏 开始 
学 钢 笠 ， 然 和 却 被 查 出 患 有 中 甩 朋 脂 瘤 ， 耳 款 几 于 听 个 见 声 音 。 后 来 径 过 手术 恢 
复 部 分 听力 ，10 年 来 他 一 边 吝 病 一 边 旦 持 练 等， 今年 高 考 终 十 被 中 国 音 乐子 院 音 
乐 学 又 录 取 了 。@ 广 州 日 报 口 广州 日 报 的 秒 拍 视频 


< 友情 链接 人 民 网 Cs 9) 由 押 
| 更 多 ， Su Rs 
, | EE ， | 


区 简介 : 报道 全 球 传播 中 国 


图 14.1 新浪 微 博 效果 


Twitter 是 微 博 系统 的 开山 蜡 祖 。2006 年 ， 博 客 技术 先驱 bloggercom 创始 人 埃 文 - 威廉 姆 斯 (Evan Williams ) | 
创建 的 新 兴 公 司 Obvious 推出 了 Twitter 服务 。 在 最 初 阶段 ， 这 项 服务 只 是 用 于 回 好 友 的 手机 发 送 文 本 信息 。 
2006 年 年 底 ，Obvious 公司 对 服务 进行 了 升级 ， 用 户 无 须 输入 自己 的 手机 号 码 ,， 便 可 通过 即时 信息 服务 和 
个 性 化 Twitter 网 站 接收 和 发 送信 息 。 

最 初 计划 是 在 手机 上 使 用 Twitter， 并 且 与 计算 机 一 样 方便 使 用 。 所 有 的 Twitter 消息 都 被 限制 在 140 个 
字符 之 内 ， 因 此 每 条 消息 都 可 以 作为 一 条 短 消息 发 送 。 这 就 是 Twitter 的 迷人 之 处 。 

国内 也 出 现 了 许多 类 似 Twitter 的 网 站 ， 如 新 浪 微 博 、 腾 讯 微 博 等 十 余 家 网 站 ,但 比较 流行 的 仅 有 新 浪 
微 博 ， 其 主要 优势 是 对 中 文 的 腿 好 文 持 ， 以 及 与 国内 移动 通信 服务 商 、 即 时 聊天 工具 的 绑 定 。 本 章 将 实现 
一 个 类 似 于 Twitter 的 微 博 系 统 ， 用 户 可 以 使 用 该 系统 发 布 言 论 ， 其 页 面 将 尽量 保持 简单 明了 ， 示 例 演 示 效 
果 如 图 14.2 所 示 。 
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"| 二 httpiiilocalhostitestiindex.php 
i 
人 三 全 


共和 输入 了 6 字 


哺 隆 下 入 号 天 再 条 : 
闷 亦 ， 早上 好 


蝇 隆 下 在 2018-07-03 22:01:36 惠 新 : 
今 哆 加 0 星 中 .. 


图 14.2 简单 的 微 博 效果 


14.2 设计 网 站 结构 


从 Twitter 网 站 以 及 新 浪 微 博 网 站 的 主页 可 以 看 出 ， 微 博 网 站 在 设计 上 的 一 个 特点 就 是 界面 极其 位 单 ， 
因此 使 用 起 来 也 十 分 容易 ， 这 也 是 微 博 得 到 很 多 人 推 潜 的 一 个 重要 原因 。 

本 节 将 设计 微 博 主页 的 结构 ， 实 现 一 个 类 似 于 Twitter 或 者 饭 否 的 微 博 系 统 ， 用 户 可 以 使 用 该 系统 发 布 
言论 ， 其 页 面 将 尽量 保持 简单 明了 。HTML 主要 结构 如 下 : 


<dv 1d="wWTapper > 
<hl> 首页 </h1> 
<U] 1d="nav"> 
<]i><a class="current" href="index.html">jQuery + 微 博 </a=></li> 
<l1><a href—"#"~></a></]1> 
</ul> 
<dv 1d="content"> <Img src="images/logol .pne" /> 
<form 1d="commentForm"> 
<fleldset> 
<textarea 1d= "cmessapge" name= "messapge"” ></textarea> 
<legend> 共 输 入 了 <span id="counter"></span> 字 
<input name="btnSign" class="submit" type="submit" id="csubmit" value=" 发 布 "> 
</legend> 
</fieldset> 
</form> 
<dv 1d="messagewindow"></div> 
</dIv> 
<div id="foot"> 版 权 信 息 </div> 
</div> 


保存 文档 为 mdex.php ， 作 为 整个 系统 的 人 口 页 面 。 页 面 上 仅仅 包含 一 个 用 于 文本 输入 的 表单 元 素 ， 以 
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及 一 块 用 于 显示 用 户 输 入 消息 的 文本 区 域 <div id="messagewindow">。 


以 下 各 节 将 使 用 PHP 实现 后 台 程 序 ， 并 使 用 jQuery 实现 页 面 内 容 的 更 新 及 显示 ， 整 个 实例 的 目录 层次 
结构 如 图 14.3 所 示 。 

大 cs 

呈 国 images 
a 器 js | 
: ‘ee "oh backend. Php | 
: ‘ee oT contie. php | 
a 人 lndex. php | 


图 14.3 ”网 站 结构 | 


具体 说 明 如 下 : | 
四 css: 目录 ， 用 于 保存 测试 页 面 的 样式 表 文 件 ， 即 grccn.css。 | 
回 images: 目录 ， 用 来 存储 需要 用 到 的 图 片 ， 如 logo 图 片 等 。 
回 js: 目录 ， 用 于 保存 jQuery 库 等 脚本 文件 。 / 
加 ”backend.php: 为 后 台 处 理 程序 ， 在 本 例 中 负责 处 理 信息 的 添加 流程 。 | 
加”config.php: 用 于 配置 数据 库 信息 。 | 
四 index.php: 主页 面 。 | 


14.3 设计 数据 库 


使 用 phpMyAdmin 创建 数据 库 ， 名 称 为 db_weibo。 在 db_weibo 数据 库 中 新 建 数 据 表 tb _ message。 数 据 
表 了 bb message 的 结构 如 下 : | 
CREATE TABLE IF NOT EXISTS tb message' ( 

id int(10) NOT NULL. 
'message' text NOT NULL. | 
date' datetime NOT NULL | 
) ENGINE=MyISAM AUTO INCREMENT=10 DEFAULT CHARSET=uti8: | 


在 phpMyAdmin 中 设计 数据 表 结 构 ， 效 果 如 图 14.4 所 示 。 | 


加 服 务 忆 : localhost > 黎 落 据 库 : db_weibo > 图 去 : 也 _ message 


国 漠 昌 请 结构 | 加 SQL 名 搜索 详 插入 局 号 出 | 图 写 入 | 下 | 


帮 着 字 类 型 排序 规则 属性 空 野人 认 痢 外 氛 作 
1id 人 int(10) 否 无 AUTO INCREMENT 修改 


癌 2 message text utf8 general ci 天 天 | 


器 3 date datetime 百 五 


tt 口 全 选 送 四 页 国 浏 览 个 收 @ 几 除 | 


图 14.4 设计 数据 表 结 构 
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僵 ' 提示 : 读者 可 以 通过 本 节 示 例 源码 提供 的 数据 包 或 db weibo.sql， 快速 安装 数据 库 ， 并 导入 试验 数据 。 

具体 方法 如 下 : 

(1 ) 复制 Data 目录 中 的 MySQL 数据 库 包 ， 然 后 复制 到 本 地 MySQL 数据 库 安装 路 径 下 。 
注意 ， 是 数据 存放 路 径 ， 如 CA\ProgramDataNMySQLAMVYSQL Server $.7\Data， 上 有 具体 路 径 根据 个 人 
系统 和 安装 路 径 而 定 。 

(2 ) 使 用 phpMyAdmin 在 本 地 MySQL 中 新 建 数据 库 ， 数 据 库 名 称 为 db weibo。 选 择 数 据 
库 db_weibo， 在 顶部 导航 菜单 中 选择 “导入 ”命令 ， 按 要 求 操作 即 可 把 数据 表 db_weibo.sql 寻 
入 db weibo 数据 库 。 


14.4 连接 数据 库 
用 户 输入 的 微 博 信息 将 被 保存 在 数据 库 中 ， 每 次 用 户 输入 并 单 击 提交 按钮 后 将 信息 写 信 数据库， 并 同 
时 显示 在 页 面 上 。 如 采用 户 刷新 页 面 ， 将 目 动 从 数据 库 中 读 取 信息 并 显示 。 
打开 配置 文件 config.php， 在 其 中 设置 数据 库 连 接 的 基本 信息 ， 代 人 码 如 下 : 


<2php 
// 数据 库 连 接 信息 ， 读 者 需要 根据 本 地 MySQL 的 配置 进行 重新 设置 


$dbhost = "localhost": 1 服务 器 

$dbuser = "root": /用户 和 

$dbpass = "11111111": // 用 户 登 录 MySQL 密码 

$dbname = "db weibo": // 连接 数据 库 的 名 称 

/建立 与 服务 器 的 连接 

$conn = mysqli connect ($dbhost, $dbuser, $dbpass) or die (Icannot connect to the database because: ' . mysqli error()):; 
// 选择 数据 库 

mysql! select db ($conn, $dbname): 

> 


14.5 显示 微 博 


在 首页 编写 如 下 PHP 脚本 ， 用 来 从 数据 库 中 该 取 微 博 信息 并 显示 出 来 。 


<?php 

/连接 数据 库 

include("config.php"): 

/准备 查询 字符 串 

$query = "SELECT 1id, message, date ". 
"FROM tb message ". 
"ORDER BY Id DESC ": 

// 执行 查 询 操 作 

$result = mysqli query($conn, $query) or die('Error, query failed. ' . mysqli error()):; 

// 如 果 没 有 查询 到 记录 ， 则 进行 提示 

if(mysqli num rows($result) == 0){ 
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nm 
A 
5S 


echo "<h3 id='comm'> 暂时 没有 更 新 .<h3>" 
echo "<ul 1d='comments=></Uul=>": 
telse{ 
echo "<h3 id='comm'> 最 近 更 新 <h3>" . 
"<Ul 1d='comments'>": 
// 得 到 所 有 的 数据 
while($row = mysqli fetch array($result)){ 
// 将 每 行 数据 的 值 赋 给 变量 
list($1d, $message, $date) = $row: 
// 处 理 HTML 特殊 字符 | 
$message = htmlspecialchars($messape): | 
// 将 新 行 字符 转换 为 <br> 
$message = nl2br($message): 
echo "<li><p class'info'> 陛下 在 $date 更 新 :</p>"; 
echo "<div class='body’><p>" . $messape . "</p>": 
echo "</div></1>": | 
) | 
echo "</ml>"; 


} 


?> 


查询 到 的 记录 和 集 ， 经 过 mysqli_num rows($result) 返回 ， 然 后 使 用 while 语句 ， 循 环 读 取 并 显示 , 读 取 
使 用 mysqli fetch_ array($result)) 获取 记录 集中 每 行 记 录 ， 然 后 绑 定 到 页 面 <div id="messagewindow"> 容 太 
中 显示 出 来 。 


14.6 发 布 微 博 


首先 ， 在 首页 index.php 中 设计 一 个 简单 的 发 布 表单 。 表 单 中 包含 一 个 文本 框 和 一 个 提交 按钮 ， 代 码 如 下 : 


<form 1d="commentForm"> | 
<fieldset> 
<textarea 1d=—"cmessage" name~—"message" ></textarea> 
<legend> 共 输 入 了 <span id="counter"></span> 字 
<input name="btnSien" class="submit" type="submit" id="csubmit" value=" 发 布 "> 
</legend> | 
</fieldset> | 
</form> 


| 
然后 ， 在 页 面 头 部 区 域 使 用 jQuery 获取 用 户 输入 的 信息 ， 当 单 击 按钮 提交 表单 时 ， 使 用 $.postO 把 信 | 
息 以 异步 方式 传递 给 服务 需 问 程序 backend.php 文件 。 同 时 ， 把 用 户 新 发 布 的 信息 同步 更 新 到 页 面 底部 显示 
mb | 
$(document).ready(function(|O { 
$("#commentForm").submit(functionO { 
$.post("backend.php",{ 
message: $("#cmessage").val(), 
action: "postmse" 
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}, function(xml) { 
$("#comm").html(" 最 近 更 新 "); 
addMessages(xml): 
}); 
return false: 
}): 
$("#counter").html($("#cmessage").val(.length + ""): 
$("#cmessage").keyup(function(O{ 
// 得 到 输入 的 字数 
$("#counter").html($(this).val().length): 
)); 
3); 
function addMessages(Xml) { 
message = $("message",xml).get(0): 
$("#comments").prepend("<]i><p class=info> 陛下 在 今天 更 新 :</p><div class=body>'"+ $("text",message).text() 十 


"</div></li>"): 
b 
为 了 避免 用 户 和 输入 大 量 字符 ， 使 用 $("#cmessage").keyup 事件 监测 键盘 输入 的 字符 数 ， 并 实时 动态 在 页 
面 进行 提醒 。 


最 后 ， 打 开 backend.php， 在 该 脚本 文件 中 用 来 接收 用 户 输入 的 信息 ， 并 把 它 插入 数据 库 中 保存 起 来 ， 


同时 以 XML 格式 返回 啊 应 数据 。 


<?php 
include("config.php"): 1/ 连接 数据 库 
header("Content-type: text/xml"): / 定义 啊 应 的 数据 格式 
header("Cache-Control: no-cache"): “禁止 缓存 
/接收 用 户 发 布 的 信息 
if(isset($ POST["message"|)){ 
$message =$ POST[ message"|: 
telse { 
$messapge = ""; 
} 
iflisset($ POST["action"|){ 
$action = $ POST["action |: 
yelse { 
$action 三 "": 


} 
1/ 如 来 还 没有 被 转 义 ， 则 进行 转 义 
lf(!get maglc quotes gpcO){ 
$message = addslashes($message): 
} 
if($action — "postmse"){ 
/查询 字符 串 
$query = "INSERT INTO tb message (message, date) VALUES (‘$message', nOW())": 
mysqll query($conn, $query) or die('Error, query failed. ' . mysqll error()); 
} 
"<?xml version=\"1.0\"?>\n"; 
echo "\t<message>\n": 
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echo "tt<text>$messapge</text>\n": 
echo "\t</message~>\n": 
> 


一 般 情况 下 ， 还 需要 对 用 户 输入 的 字符 进行 一 些 特 殊 处 理 。 例 如 ， 在 上 面 的 代码 中 ，get_magic quotes 
gpc0 函数 用 于 转 义 SQL 语句 中 使 用 的 字符 串 中 的 特殊 字符 。 如 果 成 功 ， 则 该 函数 返回 被 转 义 的 字符 串 ; 如 
来 失败 ， 则 返回 false。 

addslashes0 函数 在 指定 的 预定 义 字符 前 添加 反 斜 杜 ， 这 些 预定 义 字 符 包 括 单 引号 、 双 引号 、 反 斜 杠 、 
NULL 等 。 

默认 情况 下 ，PHP 指令 magic_quotes_gpe 为 on， 对 所 有 的 GET、POST 和 COOKIE 数据 自动 运行 
addslashesO 子 数 。 不 要 对 已 经 被 magic quotes gpc 转 义 过 的 字符 串 使 用 addslashesO0。 因 为 这 样 会 导致 双 层 
转 义 ， 遇 到 这 种 情况 时 可 以 使 用 get masgic quotes_ gpc0 图 数 进行 检测 。 

接 下 来 判断 用 户 请 求 的 事件 类 型 ， 如 果 是 postmsg， 则 将 服务 器 端 得 到 的 数据 写 人 数据 库 。 

最 后 将 新 添加 的 一 条 数据 以 XML 的 格式 响应 并 显示 出 来 。 


14.7 在 线 练 司 


本 例 设 计 一 个 MP3 播放 器 ， 界 面 模仿 主流 手机 MP3 的 简洁 界面 ， 配 合 使 用 jQuery 
Mobile+HTML 5 设计 一 款 移动 版 MP3 播放 需 。HTIML 5 新 增 一 个 <audio> 标签 ， 该 标签 可 以 
播放 本 地 的 音频 文件 ， 也 可 以 播放 远程 音乐 文件 ， 功 能 比较 强大 ， 结 合 jQuery Mobile 精美 界 
面 ， 用 户 可 以 轻松 设计 具有 良好 交互 性 的 移动 多 媒体 应 用 项 目 。 
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案例 实战 : 使 用 jQuery 开发 网 店 


咒 ! 视频 讲解 : 60 分 钟 ) 


本 章 逐 步 讲 解 如 何 创建 一 个 购物 网 站 ， 重 点 介绍 该 网 站 的 前 端 开发 过 程 。 前 端 
开发 主要 涉及 网 站 结构 、 网 页 效果 以 及 页 面 交互 功能 实现 ， 需 要 掌握 的 基本 工具 有 
HIML、CSS 和 JavaScript。 另 外 ， 还 需要 读者 了 人 解 ]Query 的 使 用 。 


第 ]D 章 业 例 衬 成 : 使 用 JQUerY 开发 网 底 


15.] 网 站 策划 


这 是 一 个 购物 网 站 ， 主 要 向 年 轻 人 提供 时 尚 服装 、 首 饰 和 玩具 等 商品 。 既 然 面 向 的 客户 群 是 年 轻 人 ， 
那么 网 站 应 该 给 人 一 种 很 时 尚 的 感觉 。 因 此 ， 需 要 给 网 站 增加 一 些 与 众 不 同 的 交互 功能 来 吸引 客户 。 | 

本 案例 能 够 根据 商品 分 类 进行 显示 ， 并 根据 分 类 显示 记录 。 在 浏览 中 浏览 者 能 够 与 页 面 进行 多 区 块 动 
态 互 动 ， 网 站 首页 效果 如 图 15.1 所 示 ， 详 细 页 效果 如 图 15.2 所 示 。 


https/localhostimysiteindec ht 


a 杂 提 二 帮 尖 | | 
| 1 


如 六 男装 圭 包 配饰 


[活动 ] 闭 翌 春 圣 迁 乔 去 串 | | 
[活动 ] 干 百 辽 和 吉 新 品 济 热 计 利 | 
[活动 ] COEY 宙 所 新 辟 宇 二 2.3 折 起 | 
[活动 ] 全 人知 蛙 阜 香 坟 避 
[活动 ] 千 百 砷 曼 陵 采 品 水 热 计 利 | ' 

| | 


| 卫 ， 


图 15.1 网 站 首页 效果 
» ET EE CT 


蜗 汪 高 云 柄 寿 统 补 衣 

全 甸 情 品 高 吉 超 笠 箭 下 六 提升 品 皇 ， 稍 这 10098 扣 王 长 趟 相识 告 而 成 ， 平 束 度 妹 ， 缠 
绩 省 ;如 -1 总 支 到 肥 墟 圩 玄 坦 ， 种 来 无 与 愉 绪 和 了 笑 可 硬 ; 而 且 面 料 后 光 剖 时 | | 
杯 ， 具 有 和 需 高 的 光 梁 ， 质 感 上 佳 ， 着 利于 交通 动员 手持 | | 
伯 情 8 加 和 有 | 
忌 前 :200.00 云 
画 ” 怪 ; 前 和 白 


员 几 


1 
尺寸 ， 丰 进 择 | 
| 
1 


Sase 


图 15.2 ”网 站 详细 页 效果 


整个 示例 以 HTML+CSS+JavaScript+jQuery 技术 混合 进行 开发 ， 遵 循 结构 、 表 现 、 逻 辑 和 数据 完全 分 离 | 
的 原则 进行 设计 。 | 
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加 ”结构 层 由 HIML 负责 ， 在 结构 内 不 包含 其 他 层 代 码 。 
回 逻辑 层 使 用 JavaScripttjQuery 技术 配合 进行 开发 ， 充 分 发 挥 各 目 优 势 ， 以 实现 最 优化 代码 编辑 
原则 。 
本 案例 不 需要 后 台 服 务 估 技术 的 支持 ， 因 此 对 于 广大 初学 者 来 说 ， 可 以 在 本 地 或 远程 计算 机 上 进行 调 
试 和 运行 。 


15.2 设计 网 站 结构 


首先 准备 好 搭建 本 网 站 的 基本 素材 。 例 如 ， 各 种 产品 的 种 类 、 产 品 的 介绍 性 文字 、 产 品 的 图 片 和 价格 
等 信息 。 然 后 把 这 些 素材 合理 整合 ， 创 建 一 个 令 人 舒适 、 恰 悦 的 网 站 。 
本 案例 比较 复杂 ， 在 开发 之 前 ， 应 先 梳 理 一 下 整个 案例 的 数据 结构 以 及 所 要 达到 的 目的 。 


15.2.1 定义 文件 结构 


每 个 网 站 或 多 或 少 都 会 用 到 图 片 、 样 式 表 和 JavaScript 脚本 ， 因 此 在 开始 创建 该 网 站 之 前 ， 需 要 对 文件 
夹 结 构 进 行 设计 。 本 网 站 模板 包含 如 下 文件 夹 : 

加 imasges 文件 夹 : 用 来 存放 将 要 用 到 的 图 片 。 

町 styles 文件 夹 : 用 来 存放 网 站 所 需要 的 CSS 样式 表 。 

回 scripts 文件 夹 : 用 来 存放 网 站 所 需要 的 jQuery 脚本 。 

本 例 功能 主要 为 展示 商品 和 针对 商品 的 详细 介绍 ， 因 此 只 需 做 两 个 页 面 ， 即 首页 ( index.html ) 和 商品 
详细 页 ( detail.html )。 


15.2.2 定义 网 页 结构 


购物 网 站 基本 上 可 以 分 为 以 下 几 个 部 分 。 

回头 部 : 相当 于 网 站 的 品牌 ， 可 用 于 放置 logo 标志 和 通 往 各 个 页 面 的 链接 等 。 

四 ”内容 : 放置 页 面 的 主体 内 容 。 

回 底部 : 放置 页 面 其 他 链接 和 版 权 信息 等 。 

本 案例 网 站 也 不 例外 ， 首 先 把 网 站 的 主体 结构 用 <div> 标签 表示 出 来 ，<div> 标签 的 id 属性 值 分 别 为 
header 、content 和 footer，HTML 代码 请 参考 本 章 示 例 源 代码 中 的 index.html 文件 。 

这 是 一 个 通用 的 模板 ， 网 站 首页 (index.html ) 和 产品 详细 页 (detailhtml ) 都 可 以 使 用 该 模板 。 有 了 这 个 
基本 的 结构 后 ， 接 下 来 的 工作 就 是 把 相关 的 内 容 分 别 插 人 各 个 页 面 。 


15.2.3 议 计 效果 图 

现在 已 经 知道 该 网 站 每 个 页 面 的 大 概 结 构 ， 再 加 上 网 站 的 原始 素材 ， 接 下 来 就 可 以 厦 手 设计 这 些 页 面 
效果 。 使 用 Photoshop 完成 这 项 工作 ， 两 个 页 面 的 设计 效果 如 图 15.1 和 图 15.2 所 示 。 由 于 本 案例 不 涉及 页 
面 设 计 过 程 ， 具 体操 作 就 不 再 展开 。 页 面 最 终 效果 确定 下 来 之 后 ， 就 可 以 进行 CSS 代码 设计 了 。 
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1$.3 设计 网 站 样式 
首先 把 网 站 的 HIML 代码 全 部 写 出 来 ， 然 后 再 编写 网 站 CSS 样式 。 


15.3.1 网 站 样式 分 类 


网 站 不 仅 要 有 一 个 基本 的 HTML 模板 ， 而 且 还 需要 有 设计 好 的 网 站 视觉 效果 。 因 此 ， 接 下 来 的 任务 就 
是 让 HTML 模板 以 网 页 形式 呈现 出 来 ， 为 了 达到 此 目的 ， 需 要 为 模板 编写 CSS 代码 。 
本 例 把 所 有 的 CSS 代码 都 写 在 同一 个 文件 里 ， 这 样 只 需要 在 页 面 的 <head> 标签 内 插入 一 个 <link> 标 
签 就 可 以 了 。 人 代码 如 下 : 


<link rel="stylesheet" href—"styles/reset.css" type="text/css" /> 


对 于 CSS 的 编写 ,每 个 人 的 思路 和 写法 都 不 同 。 推 荐 方法 : 先 编写 全 局 样式 ， 然 后 编写 可 大 范围 重用 
的 样式 ， 最 后 编写 细节 方面 的 样式 。 这 样 ， 根 据 CSS 的 最 近 优先 级 规则 ， 就 可 以 很 容易 对 网 站 进行 从 整体 
到 细 贡 样式 的 定义 。 

本 案例 整个 网 站 定义 了 如 下 几 个 样式 表 : | 

叮 resetcss: 重 置 样式 表 。 

加”box.css: 模 态 对 话 框 样式 表 。 

加 ”main.css: 主体 样式 表 。 

加”thickbox.css: 表格 框 样式 表 。 


名 ”skin.css: 皮肤 样式 表 。 | 

这 些 样式 表 放 置 在 网 站 根 目录 下 的 styles 文件 夹 中 ， 其 中 皮肤 样式 表 全 部 放置 在 子 目 录 styles/skin 中 。 ， 
皮肤 样式 表 包 括 skin 0.css ( 蓝 色 系 )、skin 1.css ( 紫色 系 )、skin 2.css (红色 系 )、skin 3.css (天蓝 色 系 )、 
skin 4.css ( 柳 色 系 ) 和 skin $.css ( 淡 绿 色 系 )。 


15.3.2 ”编写 全 局 样式 


使 用 Dreamweaver 新 建文 本 文件 ， 保 存 为 styles/resetcss， 在 该 样式 表 文 件 中 将 定义 全 局 
样式 ， 重 置 网 页 标签 基本 样式 。 详 细 代 码 请 读者 扫 码 了 解 。 

首先 ， 使 用 元 素 标签 将 每 个 元 素 的 margin 和 padding 属性 都 设置 为 0。 这 样 做 的 目的 是 ， 
避免 页 面 受 到 不 同 浏览 器 默认 设置 的 页 边 距 和 字 边 距 的 影响 。 上 阅 | 

其 次 ,设置 <body> 标签 的 字体 颜色 、 字 号 大 小 等 ， 这 样 可 以 规范 整个 网 站 的 样式 风格 。 | 

最 后 ， 设 置 其 他 元 素 的 特定 样式 。 读 者 可 自行 查阅 CSS 手册 ， 了 解 每 个 属性 的 基本 用 法 。 关 于 重 置 样 
式 ， 读 者 也 可 以 参考 Eric Meyer 的 重 置 样 式 表 和 YUI 的 重 置 样式 表 。 


15.3.3 ”编写 可 重用 样式 


网 站 的 两 个 页 面 (index.html 和 detail.html ) 都 拥有 头 部 和 商品 推荐 部 分 。 因 此 ， 头 部 和 
商品 推荐 部 分 的 两 个 样式 表 是 可 以 重用 的 。 详 细 代 码 请 读者 扫 码 了 解 。 
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15.3.4 编 与 网 站 首页 主体 布局 
本 节 介 绍 网 站 首页 的 主体 样式 设计 过 程 。 详 细 代码 请 谈 者 扫 码 了 解 。 


15.3.5 ”编写 详细 页 主体 布局 


详细 页 ( detailhtml ) 的 头 部 和 左 侧 样式 与 首页 (index.html ) 一 样 ， 因 此 只 需要 修改 内 容 
右 侧 即 可 。 网 站 详细 页 的 主体 样式 设计 过 程 请 读者 扫 码 了 解 。 
| 此 时 ， 网 站 所 需 的 两 个 页 面 的 样式 都 已 经 完成 ， 与 之 前 设计 的 效果 图 一 致 。 接 下 来 将 用 
”jQuery 给 网 站 添加 主要 交互 功能 。 


me 


15.4 设计 首页 交互 行为 


开始 编写 jQuery 代码 之 前 ， 读 者 需要 先 确定 页 面 应 该 完成 哪些 功能 。 在 网 站 首页 ( index.html ) 将 完成 
如 下 功能 。 


15.4.1 搜索 框 文字 效果 


搜索 框 默 认 会 有 提示 文字 ， 如 “请 输入 商品 名 称 ”， 当 光标 定位 在 搜索 框 内 时 ， 需 要 将 提示 文字 去 
掉 ， 当 光标 移 开 时 ， 如 果 用 户 未 填写 任何 内 容 ， 需 要 把 提示 文字 恢复 ， 同 时 添加 回 车 提交 的 效果 。 新 建 
JavaScript 文件 ， 保 存 为 inputjs， 输 入 下 面 代码 : 


$(function 0 {/* 搜索 文本 框 效 果 */ 
$("#inputSearch").focus(function () { 
$(this).addClass("focus"):; 
if ($(this).val() == this.defaultValue) { 
$(this).val(™"); 


} 
}).blur(function O { 
$(this).removeClass("focus"): 
if ($(this).valO — ") { 
$(this).val(this.defaultValue): 


’ 
}).keyup(tunction (e) { 
if (e.which =— 13) { 
alert( 回 车 提交 表单 !"); 
} 
记 


}) 


15.4.2 网 页 换 肤 
网 页 换 肤 的 设计 原理 就 是 通过 调用 不 同 的 样式 表 文 件 来 实现 不 同 的 皮肤 切换 ， 并 且 需 要 将 换 好 的 皮肤 
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SS 


记 入 Cookie 中 ,这 样 用 户 下 次 访问 时 ， 就 可 以 显示 用 户 自 定义 的 皮肤 了 。 
【操作 步 又 】 
第 1 步 ， 首 先 设置 HTML 结构 ， 在 网 页 中 添加 皮肤 选择 按钮 (<li> 标签 )， 代 码 如 下 : 


<U] 1d="skin"> 
<]i id="skin 0" title=" 蓝 色 " class="selected"> 蓝 色 </li> 
<]i id=-"skin 1" title=" 紫色 "> 紫色 <> 
<l id=-"skin 2" title=" 红色 "> 红色 </l 放 

3" title=" 天 蓝 色 "> 天 蓝 色 </li> 

<]i id=-"skin 4" title=" 检 色 "> 栖 色 二 > 

<li id="skin 5" title=" 淡 绿 色 "> 淡 绿 色 </li> 


第 2 步 ， 根 据 HTML 代码 预定 义 几 套 换 肤 用 的 样式 表 ， 分 别 有 蓝 色 、 紧 色 、 红 色 等 6 套 ， 默 认 是 监 色 ， 
这 些 样式 表 分 别 存 储 在 styles/skin 目录 下 。 

第 3 步 ， 为 HIML 代码 添加 样式 。 注 意 , 在 HTML 文档 中 要 使 用 <link> 标签 定义 一 个 带 id 的 样式 表 
链接 ， 通 过 操作 该 链接 的 href 属性 的 值 ， 从 而 实现 换 肤 ， 代 码 如 下 : 

<link rel="stylesheet" href=—"styles/skin/skin 0.css" type="text/css" 1d="cssfile" /> 


第 4 步 ， 新 建 JavaScript 文件 ， 保 存 为 changeSkinjs， 输 入 如 下 代码 为 皮肤 选择 按钮 添加 单 击 事件 。 
var $1i =$("#skin 1i"): 
$li.click(functionO{ 
switchSkin( this.id ): 
1); 


本 例 脚 本 需要 完成 的 任务 如 下 : 

加 ” 单 击 皮肤 选择 按钮 ， 当 前 皮肤 就 被 勾 选 。 

加 “将 网 页 内 容 换 肤 。 

第 5 步 ， 前 面 为 <link> 标签 设置 id， 此 时 可 以 通过 attr0 方法 为 <link> 标签 的 href 属性 设置 不 同 的 值 。 

第 6 步 ， 完 成 后 ,， 单 击 皮肤 选择 按钮 就 可 以 切换 网 页 皮肤 了 ,但 是 当 用 户 刷 新 网 页 或 者 关闭 浏览 带 后 ， 
皮肤 又 会 被 初始 化 ， 因 此 需要 将 当前 选择 的 皮肤 保存 。 

第 7 步 ， 本 例 需 要 引入 jquery.cookiejjs 插件 。 该 插件 能 向 化 Cookie 的 操作 ， 此 处 就 将 其 引入 ， 代 码 
如 下 : 

<script src="scripts/Jquery.cookie.]s" type="text/Javascript"></script> 


第 8 步 ,， 保存 后 ， 就 可 以 通过 Cookie 来 获取 当前 的 皮肤 了 。 如 果 Cookie 确实 存在 ， 则 将 当前 皮肤 设置 
为 Cookie 记录 的 值 。 
Var cookle skin = $.cookie("MyCssSkin"): 
1 (cookie skm) { 
switchSkin(cookie skin); 
} 


changeSkin js 文件 的 完整 代码 请 参考 本 章 案例 源 代码 。 
第 9 步 ， 此 时 网 页 换 肤 功能 不 仅 能 正常 切换 ， 而 且 也 能 保存 到 Cookie 中 。 当 用 户 刷 新 网 页 后 ， 仍 然 是 
当前 选择 的 皮肤 ， 效 果 如 图 15.3 所 示 。 
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SS http localhostimysite/index.ht a 
NY gs 更 柳 颇 耽 样 式 效果 | 皮肤 按钮 ”去 
和 朱 汐 下 二 CE 


自 页 品牌 女装 畏 著 土 包 配饰 


商品 分 类 
推荐 品牌 


15.4.3 ”导航 效果 


新 建 JavaScript 文件 ， 保 存 为 navjs， 输 入 如 下 代码 : 


| $(function(){// 导航 效果 

$("#nav 11").hover(function(){ 
$(this).find(".JjnNav").show'(); 

},function(){ 

| $(this).find(".jnNav").hide(: 

| 站 

葬 


/ 在 上 面 代 码 中 ， 使 用 $C("#nav 11") 选择 id 为 nav 的 <] 让 标签 ， 然 后 为 它们 添加 hover 事件 。 在 hover 事 
” 件 的 第 一 个 函数 内 ， 使 用 $(this).find("jnNav") 找到 <li> 标签 内 部 class 为 jnNav 的 元 素 。 然 后 用 show0 方 
| 注 伟 一 


二 级 菜单 显示 出 来 。 在 第 二 个 函数 内 ， 用 hide( 方法 使 二 级 菜单 隐藏 起 来 ， 显 示 效果 如 图 15.4 所 示 。 


鼠标 移 过 主 莱 
a : 轩 单 ， 则 弹出 二 级 
| vi ia | 这 mm | we 19# | | | 菜单 面板 


15.4.4 ”商品 分 类 热 销 效果 


为 了 完成 商品 分 


<div 1d="JnCatalog"> 
<h2 title=" 商品 分 类 "> 商品 分 类 </h2> 
| <div class="jnCatainfo"> 
<h3> 推荐 品牌 </h3> 
| < 


热 销 效果 ， 可 以 先 用 Dreamweaver 查看 模块 的 DOM 结构 ，HTML 代码 如 下 : 


<]i>=a hre 伍 "#nogo" > 附 殉 </a> 一 1i> 
<]i><a href—"#n0go" class="promoted"> 阿迪 达 斯 </a></li> 
一]i>=a hre 伍 "#0go" > 达 天 妮 </a>=/i> 
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<li><a href="#nogo" > 李宁 </a></li> | 
<]i><a hre 伍 "#nogo" > 安踏 </a></li> | 
<]i><a hre 仁 "#nogo" > 奥康 </a></li> | 
<]i><a hre 伟 "加 iogo" class="promoted"> 骆驼 </a></li> A 
<li><a href-"#nogo" > 特步 </a></li> | 

</ul> 


从 结构 中 发 现 ， 在 热 销 效果 的 元 素 上 包含 一 个 promoted 类 ， 通 过 这 个 类 ，JavaScript 会 自动 完成 热 销 | 
新 建 JavaScript 文件 ， 保存 为 addhotjs， 输 入 如 下 jQuery 代码 : | 


谨 添 加 hot 显示 */ | 
$(function() { 
$(".JnCatamnto .promoted").append('<s class="hot"=></s>"); | 


}) | 
此 时 ， 热 销 效果 如 图 15.5 所 示 。 | 


当 菜 单项 目 包含 class= | 
"promoted" 时 ， 会 自动 | 


呈现 热 销 图 标 
图 15.5” 热 销 效果 | 
15.4.5 ”产品 广告 效果 | 


在 实现 产品 广告 效果 之 前 ， 先 分 析 一 下 如 何 来 完成 这 个 效果 。 在 产品 广告 下 方 有 5 个 缩 略 文字 介绍 ， | 
它们 分 别 代表 5 张 广 告 图 ， 如 图 15.6 所 示 。 


当前 显示 的 广 | 
告 缩 略 文字 和 


a ll 
, b> 1 
上 上 ， | 
F 人 r~ 宝 | 
a -i 二 Fr 士 ms 上 i 一 一 |] es Du | - | 
相 罗 情书 新 未 上 毕 愤 法 小 乌 特 卖 中 次 诈 宵 惠 一 春 李 新 品 点 布 - | 
全 场 119 元 起 全 场 357 元 起 主场 99 元 全 场 3.1 折 起 全 场 4.1 折 起 


图 15.6 产品 广告 效果 / 
当 光 标 滑 过 文字 1 时 ， 需 要 显示 第 一 张 图 片 ; 当 光 标 请 过 文字 2 时 ， 需 要 显示 第 二 张 图 片 ; 依 此 类 推 。 


因此 ， 如 有 条 能 正确 获取 当前 滑 过 的 文字 的 索引 值 ， 那 么 完成 效 打 就 非常 简单 了 。 
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新 建 JavaScript 文档 ， 保 存 为 adjs。 输 入 如 下 代码 : 


此 首页 大 屏 广 告 效 果 */ 
$(fnction ( { 
Var $1merolls = $("#]nImageroll div a"): 
$imerolls.css("opacity", "0.7"): 
var len = $1merolls.length: 
Var index = 0: 
var adTimer = null: 
$imerolls.mouseover(function () { 
index = $1merolls.index(this): 
showIme(index): 
}).eq(0).mouseover(): 
// 滑 人 则 停止 动画 ， 滑 出 则 开始 动画 
$(#nImageroll").hover(function O { 


1f (adTimer) { 
clearInterval(adTimer): 

b 

}, function () 上 

adTimer = setInterval(function () { 
showImsgl(lindex): 
Index+: 
(Index == len) + Index = 0: } 

}, 5000); 


}).trigger("mouseleave"); 


}) 
/ 显示 不 同 的 幻灯 片 
function showIme(index) { 
Var $rollob] = $("#nImageroll"): 
var $rolllist = $rollob]j.find("div a"): 
Var newhref = $rolllist.eq(1ndex).attr("href"): 
$("#]S ime Wrap").attr("href", newhref) 
‘find("ime").eq(index).stop(true, true).fadeIn().siblings().fadeOut(): 
$rolllist.removeClass("chos").css("opacity", "0.7") 
.eq(index).addClass("chos").css("opacity", "1"); 


} 
在 上 面 代码 中 首先 定义 了 一 个 showImg0 男 数 ， 然 后 给 函数 传递 了 一 个 参数 imdex ( 当前 要 显示 图 片 的 


获取 当前 请 过 的 a 元素 在 所 有 a 元 素 中 的 索引 可 以 使 用 jQuery 的 mdex0 方法 。 其 中 ，.eq(0).mouseover0 
部 分 是 用 来 初始 化 的 ， 让 第 一 个 文字 高 完 并 显示 第 一 张 图 片 。 
读者 也 可 以 修改 eq0 方法 中 的 数字 来 让 页 面 默认 显示 任意 一 个 广告 。 


15.4.6 ”起 链接 提示 


本 节 设 计 主 页 右 侧 最 新 动态 模块 的 内 容 添加 超 链 接 提 示 。 现 代 的 浏览 器 中 都 自 涡 了 超 链接 提示 ， 
在 超 链接 中 加 入 title 属性 就 可 以 了 。HTML 代码 如 下 : 
<a href="#" title=" 提示 信息 "> 超 链接 </a> 


be 
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不 过 这 个 提示 效果 的 啊 应 速度 是 非常 缓慢 的 ， 考 虑 到 良好 的 人 机 交互 ， 需 要 的 是 当 鼠 标 移动 到 超 链 接 | 
的 那 一 瞬间 就 出 现 提 示 。 这 时 就 需要 移 除 <a> 标签 中 的 title 提示 效果 ， 上 有 目 己 动手 做 一 个 类 似 功能 的 提示 。 
【操作 步 又 】 
第 1 步 ， 在 页 面 上 添加 普通 超 链 接 ， 并 定义 class="tooltip" 属性 。HTML 代码 如 下 : 
< 
<1i><a hre 伟 "## 拌 1" class="tooltip" title="[ 活动 ] 伊 伴 春 鞋 迎春 大 促 ">[ 活动 ] 伊 伴 春 鞋 迎春 大 促 </a></li> 


</ul> 
第 2 步 , 在 CSS 样式 表 中 定义 提示 框 的 基本 样式 ， 代 人 码 如 下 : 
#tooltip { 


position: absolute: 
border: 1px solid #333: background: #{7fSd1: color: #333; 
padding: 1px: display: none: 


} 
第 3 步 ， 新 建 JavaScript 文档 ,保存 为 tooltip. Js， 输 入 如 下 代码 : 
此 超 链接 文字 提示 */ 
$(function ( { 
var X= 10: 
var y = 20.; 
$("a.tooltip").mouseover(function (e) + 
this.my Title = this.title: 
this.title = ™™: 
var tooltip = "<div id='tooltip'>" +this.myTitle + "</div>"; // 创建 div 元 素 
$("body").append(tooltip); /把 它 追 加 到 文档 中 
$("#tooltip") 
.Css({ 
"top": (e.pageY + y) + "pxX", 
"left": (e.papeX + XxX) + "px" 
}).show("fast"): 1// 设 置 x 坐标 和 yy 坐标 ， 并 且 显 示 
1+).mouseout(fnction () + 
this.title = this.myTitle: 
$("#tooltip").remove(): // 移 除 
+).mousemove(function (e) { 
$("#tooltip") 
.CSs({ 
"top": (e.papgeY + y) + "px", 
"left": (e.pageX + Xx) + "px" 
}): 
}); 
4) 


上 面 代 码 的 设计 思路 如 下 : | 
当 鼠 标 滑 人 超 链接 时 ， 先 创建 一 个 div 元 素 ，div 元 素 的 内 容 为 title 属性 的 值 ; 然后 将 创建 的 元 素 添加 
到 文档 中 ; 为 它 设置 x 坐标 和 y 坐标 ， 使 它 显示 在 鼠标 位 置 的 旁边 。 当 鼠标 滑 出 超 链 接 时 ， 移 除 div 元素 。 
此 时 的 效果 有 两 个 问题 : 首先 是 当 鼠 标 滑 过 后 ，<a> 标签 中 的 title 属性 的 提示 也 会 出 现 ; 其 次 是 设置 x 
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| 坐标 和 y 坐标 的 问题 ， 由 于 目 制 的 提示 与 鼠标 的 距离 太 近 ， 有 了 时候 会 引起 无 法 提示 的 问题 ( 鼠标 焦点 变化 
| 引起 mouseout 事件 )。 
| 为 了 移 除 <a> 标签 中 自 带 的 tile 提示 功能 ， 需 要 进行 以 下 操作 : 
回 ” 当 鼠标 滑 和 人 人 时， 给 对 象 添 加 一 个 新 属性 myTitle， 并 把 title 的 值 传 给 这 个 属性 ， 然 后 清空 属性 title 
的 值 。 
加 ” 当 鼠 标 请 出 时 ， 再 把 对 象 的 myTitle 属性 的 值 又 赋 给 属性 title。 
| 为 什么 当 鼠 标 移 出 时 ， 要 把 属性 值 又 传递 给 属性 title ? 因为 当 鼠 标 滑 出 时 ， 需 要 考虑 再 次 滑 入 时 的 属 
”性 tile 值 ， 如 果 不 将 myTide 的 值 传递 给 tile 属性 ， 当 再 次 滑 入 时 ，tide 属性 值 就 为 空 了 。 
| 为 了 解决 第 二 个 问题 ( 自制 的 提示 与 鼠标 的 距离 太 近 ， 有 时 会 引起 无 法 提示 的 问题 )， 需 要 重新 设置 提 
示 元 素 的 top 和 left 的 值 ， 并 为 top 增加 10px， 为 left 增加 20px。 
为 了 让 提示 信息 能 够 跟随 鼠标 移动 ， 还 需要 为 超 链 接 添加 一 个 mousemove 事件 ， 在 该 事件 函数 中 不 断 
。 更 新 提示 信息 框 的 坐标 位 置 ， 实 现 提示 框 能 够 跟随 鼠标 移动 。 
第 4 步 ， 在 浏览 器 中 预览 ， 则 可 以 看 到 如 图 15.7 所 示 的 提示 信息 框 效果 。 


节 痢 动态 
、 [ 洁 动 ] 伊 伴 春 畦 迎春 去 但 
. 十 者 十 百 展 冬 加 新 中 从 直 计 利 
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“| 活动 ] 千百度 冬 蒜 新 品 火热 让 利 
[活动 ] 千百度 冬 革 新 品 火 热 让 利 


快速 显示 的 超 链接 
提示 信息 


图 15.7 提示 信息 框 效 果 


”15.4.7 品牌 活动 横向 滚动 效果 


| 本 节 设 计 右 侧 下 部 品牌 活动 横向 滚动 效果 。 设 计 思 路 : 先 定义 动画 函数 showBrandList0， 该 函数 根据 下 
” 标 index 决定 滚动 距离 。 然 后 为 每 个 Tab 标题 链接 绑 定 click 事件 ， 在 该 事件 中 调用 showBrandListO 实现 横 
。 向 滚动 效果 。 
新 建 JavaScript 文档 ， 保 存 为 ImgSlide.js， 然 后 输入 如 下 代码 : 
上 品牌 活动 模块 横向 深 动 */ 
$(function OQ { 
$("#nBrandTab 1 a").click(function () { 
$+(this).parent().addClass("chos").siblings().removeClass("chos"): 
Var 1dx = $("#]nBrandTab 11 a").mdex(this): 
showBrandList(1dx): 
return false: 
})-eq(0)-click): 


请: 
/ 显示 不 同 的 模块 
function showBrandList(index) { 
Var $rollob] = $("#nBrandList"): 
var roll Width = $rollob].find("11").outerWidth( ): 
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rollWidth = rollWidth * 4: // 一 个 版 面 的 宽度 
$rollob].stop(true, false).animate( { lett: -rollWidth * ndex }, 1000): 
1 


在 网 页 中 应 用 该 动画 效果 ， 当 单 击 品牌 活动 右上 角 的 分 类 链接 时 就 会 以 横 辐 滚动 的 方式 显示 相关 内 容 ， 
效果 如 图 15.8 所 示 。 


当 单 击 右 上 角 的 分 类 链接 时 ， 下面 
品牌 列表 会 水 平 槛 向 滚动 显示 


品牌 活动 


品牌 活动 在 上 角 
的 分 类 链接 


了 二 一 一 
他 本 


图 15.8 ”横向 滚动 效果 


15.4.8 ”光标 滑 过 产品 列表 效果 


本 市 设 计 主 页 右 侧 下 部 光标 滑 过 产品 列表 的 动态 效果 。 当 光标 滑 过 产品 时 会 添加 一 个 半 透 明 的 庶 单 层 | 
并 显示 一 个 放大 镜 图 标 ， 效 果 如 图 15.9 所 示 。 | 
品牌 活动 运动 于 办 村 ”童鞋 


当 光 标 移动 到 产品 上 
时 ,会 显示 让 旱 层 ,并 


弹出 一 个 放大 按钮 


阿迪 法 斯 李宁 安踏 
图 15.9 ”添加 高 亮 效 果 


为 了 完成 这 个 效果 ， 可 以 为 产品 列表 中 的 每 个 产品 都 创建 一 个 <span> 元 素 ， 设计 它们 的 高 上 度 和 宽度 与 
产品 图 片 的 高 度 和 宽度 都 相同 ， 然 后 为 它们 设置 定位 方式 、 上 边 距 和 左边 距 ， 并 使 之 处 于 图 片上 方 。 
【操作 步 肥 】 
第 1 步 ， 新 建 JavaScript 文档 ， 保 存 为 imgHoverjs， 输 入 如 下 代码 : 
上 # 滑 过 图 片 出 现 放 大 镜 效 果 */ 
$(function O) { 
$("#nBrandList 11").each(function (index) ! 
Var $img = $(this).find("ime"): 
Var Ing W = $img.width(); 


Var Ing h = $1meg.height(); 
Var spanHtml = '<span style="position:absolute:top:0:left:Spx:;width:’ + Img Ww + 'px:height:’ + Img h + 'px:" 
class="1mageMask"~></span>"; 
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$(spanHtml).appendTolthis): 

1) 

$("#inBrandList").delegate(".imageMask", "hover"., function () { 
$(this).togeleClass("imageOver"); 


Da 
}) 
第 2 步 ， 通 过 控制 class 来 达到 显示 光标 滑 过 的 效果 。 首 先 在 CSS 中 添加 一 组 样式 ， 代 人 码 如 下 : 
.lImageMask { 
backeround-color: #HHE cursor: pomter; 
filter: alpha(opacity=0): 
opacity: 0: 
和 
.lImageOver { 
backeround: url(../images/Zzoom.alf) no-repeat $0% 9090: 
filter: alpha(opacity=60): 
opacity: 0.6: 
} 


第 3 步 ， 当 光标 滑 入 class 为 imageMask 的 元 素 时 ， 为 它 添加 imageOver 样式 以 使 产品 图 片 出 现 放 大 镜 
效果 ， 当 光标 请 出 元 素 时 移 除 imageOver 样式 。 

第 4 步 ， 当 光标 清和 图片 时 就 可 以 出 现 放大 错 了 。 注 意 ， 这 里 使 用 的 是 live0 方法 绑 定 事件 ， 而 不 是 
bind0 方法 。 由 于 imageMask 元 素 是 被 页 面 加 载 完 后 动态 创建 的 ， 如 果 用 普通 的 方式 绑 定 事件 ， 那 么 不 会 
生效 。 而 live0 方法 有 个 特性 ， 就 是 即使 是 后 来 创建 的 元 素 ， 用 它 绑 定 的 事件 一 直 会 生效 。 


15.$ 设计 人 详细 页 交互 行为 
在 详细 页 ( detail.html ) 上 将 完成 如 下 功能 。 


15.5.1 图片 放大镜 效 果 


当 用 户 移 动 光 标 到 产品 图 片上 时 ， 会 放大 产品 局 部 区 域 ， 以 方便 用 户 查 看 产品 细节 。 这 种 放大 镜 效 果 
在 网 店 中 是 常用 特效 ， 演 示 效 果 如 图 15.10 所 示 。 


想 要 实现 这 个 效果 ， 可 以 借助 插件 来 快速 实现 。 插件 是 jQuery 的 特色 之 一 ， 访 问 jQuery 官网 查找 一 下 ， 
看 是 否 有 类 似 的 插件 ， 本 例 使 用 的 是 名 为 jqzoom 的 插件 ， 它 很 适合 本 例 设计 需求 。 

【操作 步 又 】 

第 1 步 ， 在 官网 找到 jqueryjqzoomjs， 并 下 载 到 本 地 ， 然 后 在 详细 页 中 把 它 引 入 网 页 中 ， 代 码 如 下 : 

<!-- 产品 缩 略 图 插件 --> 


<script src="scripts/Jquery.JqZo0m.]s" type="text/Javascript"></script> 


第 2 步 ， 新 建 JavaScript 文件 ， 保 存 为 use_jqzoom.js。 查 看 官方 网 站 的 API 使 用 说 明 ， 可 以 使 用 如 下 代 
但 调用 jqzoom。 
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| 只 观看 请 时 图 | 


图 15.10 ”产品 图 片 放大 效果 


$(function O {/* 使 用 jqzoom*/ 
$(.Jqzoom ).Jqzoom(t 
zoomType: 'standard', 
lens: true. 
preloadImages: false, | 
alwaysOn: false, | 
zoomWidth: 340, | 
zoomHelght: 340, 
xXOffset: 10. 
yOtfset: 0, 
position: right' | 
ne | 
1 
第 3 步 ， 将 上 面 代码 放 入 use_jqzoom.js 文件 里 ， 然 后 在 网 页 文档 中 引入 。 


<scrlpt src="scripts/use Jqzoom.]s" type="text/Javascript"></script> 


第 4 步 ， 在 相应 的 HTML 代码 中 添加 属性 。 为 a 元 素 添加 href 属性 ， 设 置 它 的 值 指向 产品 对 应 的 rel 属 
性 ， 它 是 小 图 片 切换 为 大 图 片 的 “钩子 "， 代 码 如 下 : 
<a href—"images/pro img/blue one big.jpg" class="jqzoom'" Tel='gall'title=" 免 学 高 支 槐 条 纹 衬 衣 " > 


<img sre="imagesfpro_img/biue_one_smalljpg" title=" 免 淫 高 支 棉 条 纹 衬衣 " alt=" 免 溪 高 支 棉 条 纹 衬衣 "id="bigImg" 户 
</a> 


第 5 步 ， 添 加 jqzoom 所 提供 的 样式 。 此 时 ， 运行 代码 ， 产 品 图 片 的 放大 效果 束 显 示 出 来 了 。 


15.5.2 ”图片 庶 章 效果 


下 面 设计 产品 图 片 的 迹 沁 效果 。 单 击 “ 观 看 清除 图 片 ”按钮 ， 需 要 显示 如 图 15.11 所 示 的 大 图 ， 为 此 需 
要 启动 遮 单 层 ， 遮 盖 其 他 内 容 显 示 。 | 
本 效果 也 应 用 了 jQuery 插件 ， 在 官方 网 站 搜索 可 以 找到 名 为 thickbox 的 插件 ， 是 一 款 非常 合适 的 效果 。 ， 
【操作 步 肥 】 | 

第 1 步 ， 下 载 jquery.thickboxjs 插件 文件 。 | 

第 2 步 ， 按 照 官方 网 站 的 API 说 明 ， 引 入 相应 的 jQuery 和 CSS 文件 ， 代 码 如 下 ; 、 
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芝 = ra 3 htpwlecalhostmysiteydetailhtrnl 


高 亮 显示 的 大 图 


cose or ESC Key 


| 图 15.11 产品 图 片 庶 电 效果 


| <!-- 遮 罩 图 片 -> 
<SCIIpt src="scripts/Jquery.thickbox.]s" type="text/Javascript"></script> 
<lmk rel="stylesheet" href—"styles/thickbox.css" type="text/css" /> 


| 第 3 步 ， 为 需要 应 用 该 效果 的 超 链 接 元 素 添 加 class="thickbox" 和 title 属性 ， 它 的 href 值 代表 需要 弹出 
”的 图 片 。 代 码 如 下 : 
<a title=" 介绍 文字 " id="thickImg" hre 全 "images/pro img/blue one big.jpg" class="thickbox"> 
<imes src="images/look.gif"' alt=" 点 击 看 大 图 " 广 
</a> 


”第 4 步 , 单 击 “ 观 看 清晰 图 片 ”按钮 ， 就 能 够 显示 遮 四 层 效果 。 
在 上 面 两 个 效果 中 ,并 没有 花费 太 多 的 时 间 ， 可 见 合理 利用 成 熟 的 jQuery 插件 能 够 极 大 地 提高 开发 效率 。 


15.5.3 小 图 切换 大 图 


| 
| 
/ 本 节 设计 当 单 击 产品 小 图 时 ， 上 面 对 应 的 大 图 会 自动 切换 ， 并 且 大 图 的 放大 镜 效果 和 收 畦 效果 也 能 够 
”同时 切换 。 
” 【操作 步骤 
| 第 1 步 ， 先 实现 第 一 个 效果 : 单 击 小 图 切换 大 图 。 在 图 片 放大 镜 的 jqroom 的 例子 中 目 定义 一 个 rel 属 
性， 它 的 值 是 gall ， 它 是 小 图 切换 大 图 的 “钩子 ”，HTML 代码 如 下 : 
<l]1 class="1meList blue"> 
| <a href='Javascript:vo1d(0):' rel=" {gallery: 'gall', smallimage: "images/pro img/blue one small.]pg'.largelmage: 
| "images/pro img/blue one big.jpe'}"> 
<lmg STc='1mages/pIO img/blue one.]pg alt=""/> 

</a> 

</]L> 
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在 上 面 代码 中 ， 为 超 链接 元 素 定义 了 一 个 zl 属性 ， 它 的 值 又 定义 了 3 个 属性 ， 分 别 是 gallery、smallimage 
和 largeimage。 其 作用 就 是 单 击 小 图 时 ， 首 先 通过 gallery 来 找到 相应 的 元 素 ， 然 后 为 元 素 设置 smallimage 
和 largeimage., | 
第 2 步 ， 此 时 单 击 小 图 可 以 切换 大 图 ， 但 单 击 “观看 清晰 图 片 ” 按 钮 ， 弹 出 的 大 图 并 未 更 新 。 下 面 就 
来 实现 这 个 效果 。 
实现 这 个 效果 并 不 难 ， 但 为 了 使 程序 更 加 简单 ， 需 要 为 图 片 使 用 基于 茶 种 规则 的 命名 。 例 如 ， 为 小 图 命名 
为 blue one smalljpg， 为 大 图 片 命名 为 bue one big. jpg， 这 样 就 可 以 很 容易 地 根据 单 击 的 图 片 (blue onejpg) ， 
来 获取 相应 的 大 图 和 小 图 。 | 
第 3 步 ， 新 建 JavaScript 文档 ， 保 存 为 switchImgjs， 输 入 如 下 代码 : 
虑 单 击 左 侧 产品 小 图 切换 大 图 */ 
$(function OQ { 
$("#inProitem ul.imeList li a").bind("click", function OO { 
Var imgSrc = $(this).find("ime").attr("sre"): 
var 1= 1mgSrc.lastIndexOf(™."): 
var Unlit = 1mgSrc.substring(1): 
imeSsrc = IimgSrc.substring(0, 1); 
Var ImngSrc blg=1ImgSrc 二 ”blg" 十 Unlt: 
$("#thickIme").attr("href", imgSrc big): 
4 


})); 


首先 通过 lastIndexOf0 方法 获取 图 片 文件 名 中 最 后 一 个 “.” 的 位 置 ， 然 后 在 substring0 方法 中 使 用 该 | 
位 置 来 分 隔 文件 名 ， 得 到 “blue one” 和 “.jpg” 两 部 分 ， 最 后 通过 拼接 “_big” 得 到 相应 的 大 图 ,将 它们 
赋 给 id 为 了 hickImsg 的 元 素 。 | 
第 4 步 ， 应 用 代码 后 ， 当 单 击 产品 小 图 时 ， 不 仅 图 片 能 正常 切换 ， 而 且 它 们 所 对 应 的 放大 镜 效果 和 庶 
电 层 效果 都 能 正常 显示 ， 效 果 如 图 15.12 所 示 。 


单 击 小 图 ， 上 面 大 
图 会 目 动 切换 


图 15.12 产品 图 片 庶 置 效 果 
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zy 以 入 门 到 精通 ( 柚 课 精 编 且 ) 


15.5.4 选项 卡 


在 介绍 产品 属性 内 容 时 ， 使 用 了 Tab 选项 卡 。 这 也 是 网 页 中 经 常 应 实际 上 制作 选项 卡 的 原 
理 比 较 简单 ， 通 过 隐藏 和 显示 来 切换 不 同 的 内 容 。 下 面 将 详细 介绍 实现 选项 卡 的 过 程 。 

【操作 步骤 】 

第 1 步 ， 首 先 构 建 HIML 结构 ,代码 如 下 : 


<div class="tab"> 
<div class="tab menu"> 
<Ul> 
<]i class='"selected' 产品 属性 </li> 
<li> 产品 尺码 表 </I 记 
<]i> 产品 介绍 </li> 
</ub> 
</div> 
<dv class="tab box"> 
<div>*…</dIv> 
<div class="hide">:**</dIv> 
<div class="hide"> …</div 
</div> 
</div> 


应 用 样式 后 ,呈现 效果 如 图 15.13 所 示 。 选 项 卡 默认 第 一 个 选项 被 选中 ， 然 后 下 面 区 域 显示 相 应 的 内 
容 ; 选择 “产品 尺码 表 ” 选 项 卡 ， 该 选项 卡 将 处 于 高 腕 状态 ， 同 时 下 面 的 内 容 也 切换 成 “产品 尺码 表 ” 了 了 ; 
选择 “产品 介绍 ”选项 卡 ， 也 显示 相应 的 内 容 。 

第 2 步 ， 新 建 JavaScript 文档 ， 保 存 为 tab.js， 输 入 如 下 代码 : 


/*Tab 选项 卡 标签 */ 
$(fnction(){ 
var $div li =$("div.tab menu ul 11"): 
$div li.click(functionO { 
$(this).addClass("selected") // 当前 元素 高 亮 
.siblings().removeClass("selected"); // 去 掉 其 他 同辈 芋 元 率 的 高 亮 
var index = S$div liindex(this): 1/ 获取 当前 单 击 的 上 元素 在 全 部 元素 中 的 索引 
$("div.tab box > div") 1/ 选取 于 市 点 。 如 有 果 不 选取 子 市 点 ， 会 引起 错误 ， 如 采 里 面 还 有 div 
.eq(index).show() ”// 显示 开元 素 对 应 的 div 元 素 
SiblingsO.hide0: /隐藏 其 他 几 个 同辈 的 div 元 素 
站 .Phover(ftunction(){ 
$(this).addClass("hover"): 
},function()4 
$(this).removeClass("hover"): 
}) 
}) 


在 上 面 代码 中 ， 首 先 为 开元 素 绑 定 单 击 事件 ， 绑 定 事 件 后 ， 需 要 将 当前 单 击 的 开元 素 高 亮 ， 然 后 去 掉 
其 他 同 非 荆 元 素 的 高 亮 。 

第 3 步 ， 选 择 选项 卡 后 ， 当 前 芋 元 素 处 于 高 亮 状 态 ， 而 其 他 芋 元 素 已 去 掉 了 高 亮 状 态 。 但 选项 卡 下 面 
的 内 容 还 没 被 切换 ， 因 此 需要 将 下 面 的 内 容 也 对 应 切换 ， 效 果 如 图 15.14 所 示 。 
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第 |] 章 娄 例 实践 : 使 用 JQUerY 开发 网 启 


界 杭 威 德国 科 德 宝 的 衬 和 英国 高 十 织 韧 绪 使 成 衣 领 型 自 
欠 季 展 、 水 不 变形 ， 键 绪 部 位 平 服 工整 、 牢固 耐 诡 ! 人 性 
和 4 片 式 后 痛打 衫 结构 襄 计 提供 更 秤 对 的 洁 动 主 则 ; 领 尖 


产品 属性 
兴 用 风 摩 百年 的 经 典 全 棉 牛津 纺 画 料 ， 通 过 领先 的 洪 和 所 


理 技 术 ， 使 面料 的 抗皱 性 能 更 上 一 层 。 延续 简约 、 前 通 、 
是 康 人 设计 理念 ， 特 推出 免 洱 、 易 打 理 的 精细 免 沁 牛津 纺 长 扣 的 领 型 设计 戴 或 不 藏 领 布 风 格 炯 同 、 肯 间 呈现 ! 醇 正 天 
然 设计 ， 只 为 朝 显 自然 荣耀。 


图 1$.13 ”选项 卡 效果 图 15.14 ”选项 卡 切换 效果 


第 4 步 ， 从 选项 卡 的 基本 结构 可 以 知道 ， 每 个 元 素 分 别 对 应 一 个 div 区 域 。 因 此 ， 可 以 根据 当前 单 
击 的 上 荆 元 素 在 所 有 1 元 素 中 的 索引 | 来 显示 对 应 的 区 域 。 


a 


人 宣 提示 : 在 上 面 的 代码 中 ， 要 注意 $("div.tab box > div") 这 个 子 选 择 器 ， 如 果 用 $("div.tab box div") 选择 
器 ， 当 子 节 点 里 再 包含 div 元 素 时 ， 就 会 引起 错误 ， 因 此 获取 当前 选项 卡 下 的 子 节点 才 是 这 个 
例子 所 需要 的 。 


15.5.5 ”产品 颜色 切换 


本 节 来 设计 右 侧 产品 颜色 切换 ， 与 单 击 左 侧 产 品 小 图 切换 为 大 
当前 所 选中 的 颜色 和 显示 相应 产品 列表 ， 演 示 效 果 如 图 15.15 所 示 。 


类 似 ， 不 过 还 需要 多 做 几 步 ， 即 显示 


| 免 沽 高 支 棉 条 纹 衬衣 
全 新 精忠 高 支 机 
Er s 80-100 高 单 击 颜 色 块 ， 到 


大 图 价格 : 和 小 图 颜色 
| hobs Fp TE i 
Q 观 香 清晰 图 上 总 。 计 : 200 元 
| 给 商品 评分 : 
及 | 入 
图 15.15 产品 颜色 切换 效果 
【操作 步 怒 】 
1 步 ， 新 建 JavaScript 文档 ， 保 存 为 switchColorjs， 输 入 如 下 代码 : 
上 衣服 颜色 切换 */ 


$(function OQ { 
$(".color change ul li ime").click(tfunction () { 
$(this).addClass("hover").parent().siblings().find("1me").removeClass("hover"); 
Var ImgSrc = $(this).attr("src"); 
var 1= 1mesrc.lastIndexOf(™."): 
var Unlit = ImgSrc.substrine(1): 
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IimgSrc = ImgSrc.substrine(0, 1); 
Var ImgSrc small= 1mgSrc+" one small” + unt: 
var ImgSrce big = 1mgSsrci+" one bie" 十 Unlt: 
$("#bigIme").attr({ "sre": imegSre small +):; 
$("#thickIme").attr("href', ImgSre big): 
var alt = $(this).attr("alt"): 
$(".color change strone").text(alt): 
Var newImesrc = 1meSrc.replace("1mages/pro 1me/", ""); 
$("#nProitem .imgeList 11").hide(): 
$("#nProitem .imgList").find(".imeList "+ newImeSsrc).show(): 
)); 
让 


第 2 步 ， 运 行 代码 后 ， 产 品 颜色 就 可 以 正常 切换 了 ， 演 示 效 果 如 图 15.15 所 示 。 
第 3 步 ， 单 击 时 会 发 现 一 个 问题 ， 如 用 不 手动 去 单 击 缩 略 图 ， 那 么 放大 镜 效 末 显 示 的 图 片 还 是 原来 的 


片 ， 解决 方法 很 人 镜 单 ， 只 要 触发 获取 的 元 素 的 单 击 事件 即 可 。 在 上 面 代码 尾部 添加 如 下 一 行 代 码 : 


/解决 问题 : 切换 颜色 后 ， 放 大 图 片 还 是 显示 原来 的 图 片 
$(" 芍 DProitem .imeList").find(".imeList "+newImeSrc).eq(0).find("a").click(); 


15.5.6 ”产品 尺寸 切换 


本 节 设 计 右 侧 产 品 尺 寸 切换 效果 ， 在 实现 该 功能 之 前 先 看 一 下 效果 ， 如 图 15.16 所 示 。 
山 


图 15.16 产品 尺寸 切换 效果 


显示 当前 选中 的 产品 尺寸 


【操作 步 怒 】 
第 1 步 ， 首 先 设计 DOM 结构 ， 代 码 如 下 : 


<li class="pro size"> <span> 尺 &#12288:&&#12288: 寸 : </span> <strone> 未 选择 </strone> 
<Ul> 
<]>S</1 > 
<]>L 一 /> 
<]>SL<] > 
<lI>LL</> 
</ul> 
<> 


通过 观察 产品 尺寸 的 DOM 结构 ， 可 以 非常 清晰 地 知道 元 系 之 间 的 关系 ， 然 后 利用 jQuery 强大 的 DOM 


操作 功能 进行 设计 。 


第 2 步 ， 新 建 JavaScript 文档 ， 保 存 为 sizeAndpricejs， 输 入 如 下 代码 : 
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-Ei . 
Fp 
上 bl _ 


语 衣服 尺寸 选择 */ 
$(function ( { 
$(".pro size 11").click(function O { 
$(this).addClass("cur").siblings().removeClass("cur"): 
$(this).parents("ul").siblings("strone").text($(this).text()):; 
1) 


}) 
第 3 步 ， 应 用 上 面 jQuery 代码 ， 用 户 即 可 通过 单 击 尺 寸 来 进行 实时 产品 尺寸 的 选择 。 


15.5.7 ”产品 数量 和 价格 联动 


下 面 设计 右 侧 产品 数量 和 价格 联动 效果 。 这 个 功能 非常 简单 ， 只 要 能 够 正确 获取 单价 和 数量 ， 然 后 获 
取 它们 的 积 ， 最 后 把 积 赋值 给 相应 的 元 素 即 可 。 


< 负 注意 : 为 了 防止 元 素 刷 新 后 依旧 保持 原来 的 值 而 引起 的 价格 没有 联动 问题 ， 需 要 在 页 面 刚 加 载 时 为 元 
素 绑 定 change 事件 之 后 立即 触发 change 事件 。 


打开 sizeAndprice.js 文档 ， 输 入 如 下 代码 : 


此 数量 和 价格 联动 */ 
$(function(O { 
Var $span = $(".pro_price strone"): 
Var price = $span.text(); 
$("#num sort").change(function(O{ 
Var num = $(this).val():; 
var amount = num * price:; 
$span.text( amount ): 
1).change(); 
}) 


15.5.8 产品 评分 效果 


本 节 设 计 右 侧 产 品评 分 效果 。 
【操作 步 又 】 
第 1 步 ， 在 开始 实现 该 效果 之 前 ， 先 设计 静态 的 HIML 结构 ,代码 如 下 : 


<div class="pro rating'"> 给 商品 评分 : 
<ul class="ratine nostar"> 
<li class—"one"><a title="]1 分 "href"#">1</a><Jli> 
<]i class="two"><a title="2 分 " href="#">2</a></li> 
<li class="three"><a title="3 分 " href="#">3</a></li> 
<]i class—"four"><a title="4 分 " hre 仁 "#">4</a><Jli> 
<]i class—"five"><a title="$ 分 " hre 仁 "#">5</a></li> 
</Uul> 
</dv> 
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通过 改变 则 元素 的 class 属性 就 能 实现 评分 效果 ， 根 据 这 个 原理 可 以 编写 脚本 。 
第 2 步 ， 新 建 JavaScript 文档 ,保存 为 starjs， 输 入 如 下 代码 : 
上 * 商品 评分 效果 */ 
$(function () { 
/通过 修改 样式 来 显示 不 同 的 星 级 
$("ul.rating lia").click(function O { 
var title = $(this).attr("title"): 
alert(" 您 给 此 商品 的 评分 是 : "+ title): 
var cl = $(this).parent().attr("class"): 
$(this).parent().parent().removeClass().addClass("rating "二 cl + "star™): 
| $(this).blur0;// 去 掉 超 链接 的 虚线 框 
return false: 


| )) 
| }) 

第 3 步 ， 运 行 效 果 ， 当 单 击 灰 色 五 角 星 时 可 以 看 到 评分 等 级 ， 同 时 会 变色 显示 当前 评分 情况 ,演示 效 
果 如 图 15.17 所 示 。 


量 ， 念 冶 上 比 南 品 的 评分 时 : 3 分 


若 放 入 购物 车 


| 
/ 


图 15.17 选项 卡 切 换 效果 


15.5.9 ” 模 态 对 话 框 


下 面 设 计 右 侧 产 品 的 购物 车 功能 。 当 用 户 选择 购买 该 产品 时 ， 表 明 要 把 产品 放 人 购物 车 ， 这 一 步 只 需 
要 将 产品 的 名 称 、 尺 寸 、 颜 色 、 数 量 和 总 价 告 诉 用 户 ， 以 便 用 户 进 行 确认 ， 是 否 选 择 正 确 。 

【操作 炒 又 】 

第 1 步 ， 新 建 JavaScript 文档 ,保存 为 fnishjs， 输 入 如 下 代码 : 


| 谍 最 终 购买 输出 */ 

| $(function ( { 

Var $product = $(".JnProDetall"): 

$("#cart a").click(function (e) { 

| Var Pro_ name = $product.find("h4:first" ).text( ): 

Var pro slze = $product.find(".pro size strone").text(); 

Var pro color = $(".color change strone").text(): 

Var pro num = $product.find(“#num sort").val(): 

Var pro_price = $product.find(".pro price strong").text(): 
| var dialog =" 感谢 您 的 购买 。<div style='font-size:12px:font-weight:400:> 您 购买 的 产品 是 : "十 pro name 十 
二 
SI 
| "颜色 是 ; "pro color 十 "; "十 
| IN 
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" 总 价 是 : " 十 pro price 十" 元。<div>"; | 
$("#inDialogContent").html(dialog): | 
$(#basic-dialog-ok'").modal(): 
return false: /避免 页 面 跳 转 


}); | 
}) 


第 2 步 ， 应 用 该 特效 ,演示 效果 如 图 15.18 所 示 。 | 


| 

中 感谢 您 的 购买 。 
您 网 环 的 产品 是 ; 部 狐 高 专 棉 条 获 衬 夜 ， 尺寸 是 ; 3 ， 前 名 是 ; 莫 白 1 数量 | 

星 ; 1i 总 们 是 ; 2200 区 | 


图 15.18 ” 放 入 购物 车 提示 效果 | 


15.6 在 线 练 习 


本 节 提 供 两 个 操作 案例 ， 感 兴趣 的 读者 可 以 扫 码 阅读 。 


* 443。 


ee 


di 使 用 jQuery 开发 Web 应 用 


下 讲解 : 48 分 钟 ) 


电子 相册 是 Web 应 用 的 一 种 形式 ， 其 核心 功能 就 是 对 照片 进行 网 络 化 编辑 、 存 
储 、 管 理 和 浏览 。 本 章 索 例 设 计 简 单 ， 主 要 功能 包括 照片 的 分 类 组 织 和 浏览 。 整 个 实例 
以 HIMLT+CSS+JavaScriptt]Queryt+XML 技术 混合 进行 开发 。 道 循 结 构 、 表 现 、 逻 和 辑 和 
数据 完全 分 离 的 原则 进行 设计 。 结 构 层 由 HTML 负责 ， 在 结 移 屋内 不 包含 其 他 屋 代码 ) 
表现 屋 完全 独立 ， 并 实现 表现 屋 皮 肤 定制 功能 ，CSS 代码 完全 兼容 IE6t+ 和 现代 浏览 回 ， 
符合 Web 标准 设计 的 规范 } 逻辑 层 使 用 Javascrlpt+JQuerVy 技术 配合 进行 开发 ， 充 分 发 挥 
各 自 优 势 ， 以 实现 最 优化 代码 编辑 原则 ， 其 中 数据 的 导入 由 JavaScript 负责 ， 而 数据 的 
解析 由 ]Query 负责 。 示 倒 所 要 呈现 的 数据 完全 独立 ， 并 以 XML 格式 进行 存储 ， 数 据 容 
量 可 以 自由 增 减 ， 不 受 程 序 和 页 面 结构 的 限制 。 本 实例 不 需要 后 和 台 技 术 支 持 ， 可 以 在 本 
地 或 远程 计算 机 上 进行 测试 和 运行 。 


第 ]0 章 娄 例 实 勤 : 使 用 JQUerY 开发 Wep 这 用 


16.1] 人 设计 思路 


在 开发 之 前 ， 用 户 需 要 梳理 一 下 整个 实例 的 设计 思路 ， 以 及 所 要 达成 的 目标 。 本 案例 不 是 大 型 Web 应 
用 项 目 ， 谈 不 上 选 题 调研 、 和 策划、 论证 和 开发 计划 ， 但 是 条 单 明确 设计 的 思路 和 目标 还 是 必需 的 。 | 


16.1.1 案例 预览 


本 案例 具备 以 下 功能 : 

加 分 类 比较 灵活 ,方便 浏览 者 按 类 浏览 ， 如 图 16.1 所 示 。 

加 缩 略图 富有 动感 ， 方 便 选择 ， 单 击 某 个 缩 略图 即 可 加 载 并 显示 缩 略图 的 大 网 ， 如 图 16.2 所 示 。 

加 图 片 分 类 自由， 可 以 任意 定制 和 增 减 ， 分 类 设置 和 显示 不 受 限 于 页 面 结 构 ， 而 且 可 以 自由 控制 ， 
如 图 16.3 所 示 。 

可 以 定制 相册 皮肤 ， 实 现 用 户 自己 决定 相册 的 肤色 ， 如 图 16.4 所 示 。 


呵 


€or) = 晤 四 | Ei 元 二 3 hitp: /iorn bentimys bey i him 


图 16.2 照片 浏览 比较 方便 


€ EDT J 


二 国 风情 [ 租 必 各 过 调 可 轿 强 对 后 ] 


下 | 导 
最 Er 人 | 
星 


16.3 可 以 自由 增加 的 分 类 图 16.4 可 以 灵活 设置 相册 皮肤 
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“16.1.2 案例 策划 


整个 案例 的 设计 思路 可 以 按 如 下 几 个 部 分 进行 讲解 。 

回 ”结构 部 分 : 由 HTML 负责 。 结 构 代 码 存 放 在 index.html、index1.html 和 index2.html 文件 中 ， 负 责 
构建 页 面 的 基本 骨架 。index.html、index1.html 和 index2.html 三 个 文件 没有 必然 联系 ， 只 是 为 方便 
学 习 而 逐步 搭建 的 框架 。index.html 文档 结构 为 初步 设计 版 ，index2.html 文档 结构 为 最 终 效果 版 。 

回 布局 部 分 : 由 CSS 负责 。 页 面 样式 代码 存放 为 images/style0.css ( 初步 样式 )、images/stylecss ( 最 
终 效果 )、images/colour blue.css ( 蓝 色 皮肤 )、images/colour green.css ( 绿色 皮肤 )、imasges/colour 
orange.css ( 橙色 皮肤 )、images/colour pink.css ( 粉红 色 皮 肤 )、images/colour pumple.css ( 紫色 皮肤 )。 

脚本 部 分 :由 JavaScript 和 jQuery 负责 。 脚 本 代码 存放 为 javascript0.js (初步 控制 皮肤 ) 和 javascriptjs 
(控制 皮肤 、XML 数据 的 读 显 操作 )。 同 时 注意 在 文档 中 导入 jqueryjs 框架 文件 ， 本 实例 使 用 版 本 
为 jQuery 1.11.1， 早 期 jQuery 版 本 的 语法 可 能 略 有 不 同 。 

数据 部 分 : 由 XML 负责 。 存 放 在 pics 文件 夹 中 。 左 侧 分 类 导航 信息 存放 在 pics/class.xml 文件 中 ， 
可 以 根据 照片 容量 自由 增 减 。 在 pics 文件 夹 中 可 以 自 定义 子 文件 夹 ， 每 个 子 文件 夹 表 示 一 类 照片 ， 
文件 夹 的 名 称 可 以 自由 设置 。 具 体 照 片 、 照 片 缩 略图 和 照片 XML 数据 索引 都 放 在 不 同 的 子 分 类 文 
件 夹 中 ， 详 细 说 明 可 以 参阅 16.1.3 节 内 容 。 


16.1.3 设计 XML 数据 


数据 结构 对 于 Web 开发 很 重要 ， 一 般 都 需要 提前 设计 并 确定 下 来 。 对 于 一 个 大 型 项 目 来 说 ， 数 据 结构 
| 搭建 好 了 ， 也 就 等 于 项 目 开 发 完成 了 一 半 ， 后 期 开发 无 非 是 借助 逻辑 层 把 这 些 数据 串 连 为 一 个 有 机 体 ， 并 
“映射 到 页 面 中 。 
| 本 实例 所 用 的 数据 存在 两 种 形式 : 一 类 是 实体 的 照片 文件 ， 这 些 图 像 文 件 按 原 始 状 态 、 固 定位 置 和 有 序 组 
| 织 在 项 目下 的 子 目 录 中 ; 男 一 类 是 XML 格式 数据 ， 这 些 数据 是 相关 照片 文件 的 索引 信息 ， 存 储 这 些 索 引信 息 
目的 就 是 方便 脚本 灵活 控制 照片 的 显示 。XML 格式 数据 包括 两 种 文件 : picsclassxml 和 pics/ 子 目录 /picsxml。 
第 一 种 文件 ( pics/class.xml ) 负责 存储 分 类 导航 栏 的 显示 信息 ， 结 构 如 下: 
<?xml version="1.0" encodine—="utf-8"?> 
<pilcs url="p1ics"> 
<folder name="1" class="class.jpg"> 热 和 市 风情 </folder> 
<folder name="2" class="class.jpg"> 高 山 风 光 </folder> 
<folder name='"3" class="class.jpg"> 异国 风情 </folder> 
<folder name="4" class="class.jpe"> 冬日 风光 </folder> 
<folder name="$" class="class.jpg"> 野外 风景 </folder> 
<folder name="6" class="class.jpg"> 花 儿 灿烂 </folder> 
<folder name="7" class="class.jpg"> 充实 的 乡村 </folder> 
<folder name="8" class="class.jpg"> 天 高 云 淡 </folder> 
</Plcs> 


其 中 pics 表示 根 节 点 。folder 是 子 节 点 ， 它 包含 每 个 分 类 文件 夹 ( 照片 分 类 ) 的 信息 ， 当 前 节点 的 name 
属性 表示 分 类 文件 夹 的 名 称 ，class 属性 表示 分 类 导航 的 图 标 ，folder 节点 所 包含 的 信息 为 当前 分 类 的 标题 。 
| 以 上 数据 必须 根据 子 文件 夹 的 实际 信息 进行 填写 ， 否 则 程序 在 读 取 数据 时 就 会 发 生 亲 乱 。 该 文件 可 以 自由 
”增加 folder 子 节点 的 数目 ， 以 实现 自由 增 减 相册 分 类 。 


.446 。 


第 1]0 章 业 例 实 吕 : 使 用 JQUerY 开发 Wep 应 用 


| F pE 


第 二 种 文件 ( pics/ 于 目录 /pics.xml ) 负 员 存储 条 类 照片 的 信息 ， 结 构 如 下 ( 以 “4” 子 文件 夹 为 例 ): 
<?xml version="1.0" enc =—"utf-8"?> 
<pics url="p1ics"> 
<folder name="4" class=" 冬日 风光 "> 
<file>]1.jpg</file> 
<file~>2.jpg</file> 
<file>3.jpg</file> 


<file~>9.jpeg</file> 
<file=10.Jpe</file> 
</folder> 
</plcs> 


该 结构 也 是 以 pics 为 根 节点 ， 子 节点 folder 表示 当前 分 类 信息 ( 当前 目录 )， 其 中 name 属性 表示 目录 
的 名 称 ，class 属性 表示 当前 分 类 的 标题 。 请 注意 本 类 型 文件 的 XML 结构 与 第 一 种 类 型 结构 中 节点 和 属性 
名 称 所 表示 的 语义 是 不 同 的 。 

在 folder 节点 下 包含 很 多 个 fle 节点 ， 它 们 分 别 表示 每 个 图 片 文件 的 信息 ，file 节点 包含 的 文本 为 每 个 
照片 的 完整 名 称 。 还 可 以 根据 需要 为 fle 节点 增加 各 种 属性 ， 如 图 片 大 小 、 说 明 等 。 

在 pics 相片 目录 下 的 每 个 子 文件 夹 中 都 包含 一 个 同名 的 pics.xml 文件 ， 文 件 中 存储 着 当前 子 目录 所 有 照片 
的 信息 。 同 时 每 个 子 目录 中 还 应 保存 增加 了 前 缀 (t) 的 同名 缩 略 图 ， 后 级 为 jpg， 大 小 为 50 像素 x 50 像素 
左右 。 


16.2 设计 相册 结 


本 章 电子 相册 实例 的 页 面 结构 比较 单一 ， 只 有 一 个 页 面 (index.html )， 下 面 分 两 节 从 宏观 和 微观 两 个 
层面 来 解析 页 面 的 结构 。 


16.2.1 设计 基本 结构 


从 宏观 层面 来 审视 页 面 结 构 ， 整 个 页 面 显 示 为 2 行 3 列 的 布局 样式 。 从 HTML 结构 层 分 析 ， 所 有 
HTML 代码 都 包含 在 <div id="wrap"> 包含 框 中 ， 其 下 又 磐 套 三 个 子 包 含 框 : <div id= "logo"> ( 标题 块 )、 
<div id="nav"> ( 导航 块 ) 和 <div id="main"> ( 主体 区 域 块 ) 基本 结构 代码 的 具体 说 明 如 下 : 


<div 1d="wrap"> <!-- 页 面包 含 框 --> 
<div id="logo"> <1-- 标题 框 --> 
<hl> </h1l> <!-- 网 页 标题 -二 
<h2 1d—"lnks"></h2> <!-- 网 页 说 明 (副标题 )--> 
</dIv> 
<div 1d="nav"> < 一 导航 栏 -> 
<Ul></ul> <!-- 导航 列表 框 --> 
<div id="colours"></div> <!-- 皮肤 控制 按钮 包含 框 --> 
</div> 
<div id="main"> <!-- 主体 信息 包含 框 --> 
<div id="side menu"></div> <!-- 侧 栏 菜单 包含 框 --> 
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<div 1d="content"> <1-- 照片 显示 区 域 -> 
<h3></h3> <!-- 图 片 分 类 标题 --> 
<div id="gallery"></div> <!-- 缩 略 图 包含 框 --> 
</div> 
</div> 


</div> 


在 设计 基本 结构 时 ， 用 户 应 该 注意 两 个 问题 : 

加 ”结构 应 人 简洁、 明晰 。 避 免 任 意 使 用 ID 和 class 属性， 如 果 借 助 包含 选 择 需 能 够 实现 样式 控制 的 ， 
就 不 要 定义 ID 属性 。class 属性 作为 类 样式 专用 属性 一 般 也 不 要 乱用 ， 除 非 页 面 中 有 两 个 或 更 多 的 
元 素 拥 有 相同 的 样式 ， 才 可 以 考虑 使 用 类 样式 来 设计 ， 和 否则 就 不 要 使 用 。 

困 ”使 用 结构 标签 一 定 要 注意 霹 义 性 。 基 本 结构 一 般 使 用 div 元 系 即 可 ， 但 是 如 采 内 容 的 语义 性 比较 明 
确 ， 不 妨 选 用 对 应 的 元 素 ， 如 标题 、 列 表 、 数 据 表 格 、 段 落 文本 等 。 


16.2.2 完 羞 页 面 结构 


相对 于 基本 结构 ， 微 观 结 构 的 设计 相对 比较 灵活 ， 只 要 不 破坏 页 面 结构 和 内 容 的 语义 性 即 可 。 下 面 围 


绕 结 构 中 几 个 细 世 设计 进行 说 明 ， 详 细 代码 请 参阅 本 章 实 例 。 


别 ， 


第 一 ,行内 文本 不 要 包含 过 多 的 元 素 。 例 如 ， 在 页 面 二 级 标题 中 (代码 如 下 ): 
<h2 id="links"> 联系 主人 <a hre 伍 "#">Email</a><br 户 访问 主人 <a hre 仁 "#">Blog</a></h2> 


可 以 使 用 多 个 span 元 素来 包 于 不 同行 文本 (代码 如 下 )， 但 是 这 样 做 显得 有 点 画蛇添足 。 
<h2 id="links"><span> 联系 主人 <a hre 伍 "#">Email</a><span/><span> 访问 主人 <a hre 伍 "#">Blog</a><span></h2> 


当然 ， 如 果 需 要 为 它们 设计 不 同 的 样式 ， 可 以 考虑 上 面 的 做 法 ,否则 不 建议 这 样 设计 。 
第 二 ， 列 表 信 息 建 议 使 用 列表 结构 ， 使 用 列表 结构 时 应 注意 有 序列 表 、 无 序列 表 和 定义 列表 之 间 的 区 
不 能 随意 选用 。 例 如 ， 下 面 代码 是 页 面 导 航 信 息 。 
< 
<1i><a class—"selected" href="#"> 首页 </a></li> 
<]i><a hre 伍 #"> 主人 简历 </a></li> 
<]i><a hre 合 "六 > 客人 留言 </a><li> 
</ul> 


在 列表 项 中 ， 超 链接 应 该 包含 在 元素 内 ， 不 建议 在 <a> 标签 中 再 包含 其 他 元 素 ， 特 别 是 一 些 块 状 显 


示 的 元 素 。 很 多 用 户 喜 欢 在 <a> 标签 中 租 套 多 个 元 素来 设计 特效 样式 ， 不 建议 这 样 使 用 。 


对 于 行内 信息 使 用 行内 元 素 即 可 。 例 如 ， 对 于 下 面 这 个 同行 内 显示 的 多 个 超 链 接 ( 皮肤 切换 按钮 )， 直 


接 在 一 行内 显示 ， 不 使 用 列表 结构 会 更 容易 操作 。 


<div 1d="colours"= 
<a href—'"#"><imeg src="images/pinkpng" alt=" 粉红 色 皮 肤 " /></a> 
<a hre 传 '#">=img src"images/blue.pne" alt=" 蓝 色 皮肤 " /></a> 
<a href—"#"><img src="images/green.png" alt=" 绿色 皮肤 " /></a> 
<a hre 人 ="#"><imeg src="images/purple.png" alt=" 紫色 皮肤 " /></a> 
<a hre 人 ="#"><imeg src="images/orange.pne" alt=" 柳 色 皮肤 " /></a> 
</dIv> 
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不 过 ， 有 很 多 用 户 对 此 存在 疑问 ， 认 为 上 面 的 结构 应 该 属于 列表 信息 ， 为 什么 不 使 用 列表 结构 呢 ? 
例如 ， 在 禅 意 花园 的 页 面 设计 中 也 出 现 过 这 样 的 结构 设计 问题 (采用 上 面 代码 结构 )， 曾 有 记者 采访 Dave 
shea ( 禅 意 花园 的 主人 ) 时 提 及 这 个 问题 ，Dave Shea 认为 还 是 使 用 列表 结构 会 更 完美 一 些 。 当 然 ， 如 果 用 
户 使 用 列表 结构 ， 且 希望 在 一 行内 显示 ， 就 应 该 在 CSS 样式 中 定义 元 素 为 行内 显示 。 

从 更 人 性 化 的 角度 来 设计 皮肤 按钮 ， 还 可 以 使 用 如 下 结构 : 

<U] 1d="colours"> 

<1i><a href="#"> 粉红 色 皮 肤 </a> </li> 

<]i><a href='#"> 蓝 色 皮肤 </a> 一 

<]i><a href=#"> 绿色 皮肤 </a></li> 

<]i><a href=#"> 紫色 皮肤 </a> 一 > 

<]i><a hre 伟 "# > 权 色 皮肤 </a> < 
</Uul> 


这 个 结构 把 按钮 图 标 从 结构 中 全 部 清除 ， 以 列表 结构 显示 皮肤 切换 按钮 信息 ， 这 种 方法 完全 抛弃 了 修 
饰 性 的 图 标 对 于 结构 的 影响 。 然 后 在 CSS 中 使 用 背景 图 像 来 设计 图 标 显示 ， 并 隐藏 所 包含 的 文本 。 这 种 结 
构 有 如 下 优点 : | 
回 ”更 符合 语义 性 设计 要 求 ， 整 个 结构 看 起 来 更 加 简洁 。 
回 ”更 方便 搜索 引擎 的 检索 ， 对 于 图 像 来 说 ， 其 包含 的 信息 无 法 直接 被 搜索 引擎 自动 抓 取 。 
回 ”更 适应 不 同 的 设备 浏览 同时 设计 师 可 以 更 容易 控制 按钮 的 显示 ， 以 及 灵活 编辑 和 修改 样式 。 | 
第 三 ， 根 据 信息 显示 需要 ， 适 当 增加 一 些 辅助 元 素 ， 以 方便 CSS 或 JavaScript 进行 控制 。 例 如 ,对 于 
左 侧 的 分 类 导航 图 标 ， 中 间 需 要 显示 分 类 标题 ， 故 在 结构 中 增加 了 一 个 span 元 素 ， 代 码 如 下 : 


<div><a href="#"><imeg src="pics/1/class.jpe" alt=" 相册 分 类 文件 来 1" /></a><span> 相册 1</span></div> 


然后 显示 样式 和 位 置 将 由 CSS 负责 ， 而 显示 的 内 容 则 由 动态 数据 负责 ， 侍 助 JavaScript 脚本 来 实现 。 
由 于 侧 栏 的 导航 图 标 是 以 动态 数据 的 形式 显示 的 ， 故 不 适合 使 用 CSS 用 背景 图 像 的 方式 进行 设计 。 

同样 的 还 有 照片 显示 区 域 的 标题 ， 代 码 如 下 : 

<h3><span class="title"> 相册 1=</span><=span class="sub">[ 鼠标 移 过 纵 略 图 可 以 放大 浏览 ]</span=</h3> 


由 于 该 标题 信息 是 动态 的 ， 执 行 中 由 JavaScript 根据 XML 数据 动态 进行 改写 ， 而 后 面 的 提示 信息 又 是 | 
静态 的 ， 故 使 用 两 个 span 元 素 分 别 进行 定义 。 考 虑 到 JavaScript 能 够 更 方便 地 控制 ， 所 以 这 里 又 为 它们 定 
义 了 class 属性 ， 这 样 使 用 CSS 和 JavaScript 都 很 容易 实现 控制 ， 且 不 会 形成 元 余 代码 。 


16.3 设计 相册 布局 和 样式 

相对 于 结构 ， 页 面 布 局 和 局 部 样式 设计 要 复杂 一 些 。 本 案例 样式 设计 分 为 两 步 : 第 一 步 ， 先 以 静态 页 面 

的 方式 来 设计 作品 ， 这 样 就 可 以 更 容易 撑 起 页 面 框 架 和 描绘 大 致 页 面 效果 ; 第 二 步 ， 根 据 JavaScript 动态 显 | 
示 数 据 的 需要 ， 后 期 补 加 和 完善 页 面 样式 设计 。 


16.3.1 基本 布局 思路 


整个 页 面 的 布局 比较 简单 ， 其 呈现 的 效果 为 2 行 3 列 ， 而 根据 结构 层次 的 实际 设计 效果 ， 页 面 应 该 是 
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一 个 3 行 2 列 式 布局 效果 ， 如 图 16.5 所 示 。 在 显示 时 ， 标 题 行 和 导航 栏 由 于 区 分 度 不 大 ， 故 在 视觉 上 显示 
为 一 行 效果 ， 而 <div id="content"> 区 域 由 于 左右 两 列 区 分 明显 ， 故 在 视觉 上 显示 为 两 列 效果 。 


<div 1d="wrap"> 


<div 1d="]logo"> 


<div 1d="nav"> 


<dv 1d="content"> 


图 16.5 页面 基 本 结构 的 布局 


在 设计 时 ， 可 以 考虑 让 标题 行 包含 框 (<div id="logo"> ) 和 导航 包含 框 ( <div id="nav"> ) 流动 布局 ， 即 让 它 
们 以 默认 状态 自然 显示 。 而 <divid'side menu"> 和 <div id="content"> 子 包含 框 则 以 浮动 布局 ， 以 实现 并 列 显示 。 

为 了 精确 布局 ， 在 <div id="side menu"> 和 <div id="content"> 子 包 含 框 中 以 绝对 定位 布局 来 控制 侧 栏 
导航 图 标 和 缩 略 图 的 显示 ， 因 此 还 应 该 在 这 两 个 子 包 含 框 中 定义 包 售 块 ， 以 便 设 置 定 位 坐标 。 另 外 ， 可 估 
助 伪 列 布 局 设计 <div id="side menu"> 和 <div id="content"> 子 包 含 框 等 高 显示 。 


16.3.2 ”定义 默认 样式 和 基本 框架 


在 编写 样式 表 时 ， 建 议 先 统一 页 面 标签 的 默认 样式 ， 这 样 可 以 避免 重复 设计 相同 的 样式 。 本 实例 所 定 
义 的 元 素 殉 认 样 式 如 下 : 


body {/* 页 面 基 本 属性 */ 
font-family: verdana, arial, sans-serif: 诺 统一 字体 显示 类 型 */ 
padding: 0: 讶 清除 页 边 距 */ 
margin: 0: 谍 清除 页 边 距 */ 
font-size:.75em: 上 * 统一 字体 大 小 */ 
text-align:center: 诺 网 页 居中 显示 ， 针 对 非 正 浏览 器 */ 
backeround:#000 url(topbg.jpg) repeat-x left -80px: 上 请 定制 网 页 背景 色 和 背景 图 像 所 
color: #656565: 访 统 一 页 面 字 体 颜 色 */ 

和 

Pp tmargImn: 0: } 证 清除 默认 的 边 距 */ 

img {border:none:} * 清除 图 像 边 框 */ 

a {text-decoration:none:} 上 * 清除 超 链接 下 男 线 */ 

ul ol dl, dt dd,lif 证 清除 列表 结构 的 默认 样式 */ 
margin: 0; 证 清除 边界 */ 
padding: 0: 虑 清除 补 白 */ 
list-style: none: 上 * 清除 项 目 符 号 */ 

} 


设计 页 面 基本 布局 样式 。 首先， 在 页 面包 含 框 中 定义 页 面 显 示 宽度 、 居 中 显示 和 恢复 文本 左 对 齐 的 默认 
样式 。 
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#wrap { 页 面包 含 框 */ 
Width:880px: 
margin:0 auto:; 
text-alien:left: 

} 


第 1]0 章 业 例 实 或 : 使 用 JQUerY 开发 Wep 应 用 


ni 
上 >、 a 


上 谨 固 定 宽度 5 
* 实现 水 平 居 中 ， 针 对 非 正 浏览 器 */ 
广 恢 复 页 面 文 本 左 对 齐 默认 样式 */ 


然后 ， 定 义 页 面 基本 包含 框 样式 ， 核 心 代码 如 下 : 


胡 ogo {* 标题 框 样式 */ 
helght: 80px: 
border-top:6px solid: 


} 

#nav {/* 导航 框 样式 */ 
helght: 38px: 
border-bottom: 6px solid: 


} 
#main {/* 主体 框 样式 */ 
overflow:auto: 
border: 6px solld: 
border-top:none: 
backeround:url(bg.gif) repeat-y center: 
b 


此 固定 高 度 */ 
此 在 顶部 定义 一 条 粗 的 修饰 线 */ 


ee 
上 访 在 底部 定义 一 条 粗 的 修饰 线 */ 


庶 强 迫 包含 框 能 自动 张 开 */ 
谍 定 义 修饰 性 的 粗 边框 */ 

片 清除 顶部 边框 样式 */ 

庶 定 义 伪 列 布局 ( 背景 图 像 )*/ 


最 后 ， 定 义 主体 包含 框 内 的 两 个 子 包 含 框 的 布局 样式 。 


#side_menu {/* 左 侧 栏目 样式 */ 
float: lett: 
paddmg: 22px 12px 12px 12PpX: 
width: 170px;: 
margin-top:2em:; 

} 

#content {/* 右 侧 栏目 样式 */ 
float: lett: 
padding:12px 8px OPX 8px ; 


16.3.3 定义 局 部 样式 


上 庆 向 左 浮动 */ 

访 利 用 补 白 调整 四 周 空隙 */ 
语 固定 宽度 */ 

上 调整 顶部 边 距 */ 


片 问 左 溯 动 */ 
庶 利 用 补 白 调整 四 周 空 际 */ 


整个 页 面 的 样式 非常 多 ， 限 于 篇 幅 ， 这 里 不 再 全 部 列举 并 进行 说 明 。 下 面 着 重 讲 解 几 个 CSS 设计 细节 


和 技术 难点 。 


第 一 ， 标 题 透 明 效果 的 设计 。 在 设计 中 ,考虑 到 标题 字体 比较 大 ， 如 条 颜 色 过 重 ， 会 分 散 浏览 者 的 注 


意 力 ， 故 以 半 透 明 的 效果 设计 ， 具 体 代 码 如 下 : 


#logo hl { 
filter:alpha(opacity=40): 
-moz-opacilty:0.4: 
opacity:0.4: 

b 


访 半 透明 显示 标题 */ 

诺 正 浏览 更 专 用 */ 

/# Firefox 浏览 器 专用 */ 
诺 标 准 浏览 紫 专 用 */ 
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zooy 俯 入 门 到 精通 ( 柚 课 精 纺 县 ) 


第 二 ， 分 类 导航 栏 ( 页 面 左 侧 ) 中 导航 图 标 与 说 明文 字 的 重 登 设计 。 分 类 导航 栏 的 局 部 结构 如 下 : 
<dlv 1d="side menu > 

<div><a href="#"><imeg src="pics/l/class.jpg" alt=" 相册 分 类 文件 夹 1" /></a><span> 相册 1=/span>=/div> 
</div> 


设计 思路 : 让 <div id-"side_ menu"> 包含 框 内 的 每 个 div 元 素 浮动 显示 ， 并 清除 浮动 ， 禁 止 并 列 显示 ， 
实现 单列 显示 效果 。 同 时 定义 该 div 元 素 为 包含 块 ， 实 现 span 元 素 绝对 定位 ， 从 而 精确 固定 在 导航 图 标的 
右 下 角 。 具 体 代码 如 下 : 


| #side menu div { 站 于 代 富 慌 柱 二 于 

| padding: 4px: 片 标准 浏览 器 专用 */ 

| margin:2px auto: 谍 标 准 浏 览 器 专用 */ 

| float:left: 语 标 准 浏览 器 专用 */ 

| position:relative: 访 标 准 浏 览 器 专用 */ 

| } 

| #side menuaf 谍 包 含 的 超 链接 样式 */ 

| border:solid 2px #bbb: * 边框 样式 */ 

| } 

| #side menu img { 庄 包 含 图 像 的 样式 */ 

| border:solid 3px #efefef: 谍 与 a 元 素 边框 形成 交错 效果 */ 
| } 

] #side_ menu span + 谍 包 含 说 明 性 标题 的 样式 */ 
| position:absolute: 上 # 绝对 定位 */ 

right:12px: 片 距离 包 含 框 右 侧 距离 */ 
| bottom: 10px: 语 距离 包含 框 底部 距离 */ 
| padding:2px 4px: /# 内 部 空隙 */ 

| color:#eee: 诺 浅 色 字体 */ 

| backeround:#444: 证 灰色 背景 */ 

| filter:alpha(opacity=60): 

| -moz-opacity:0.6; 

| opacity:0.6: 

} 

| 


| 第 三 ， 使 用 CSS 技术 来 模拟 鼠标 移 过 缩 略图 时 ， 能 够 目 动 浏览 大 图 。 这 是 CSS 的 一 种 特效 ， 它 主要 利 
用 绝对 定位 的 方法 来 设计 当 鼠 标 移 过 缩 略 图 时 ， 放 大 缩 略 图 显示 并 精确 定位 到 预览 区 域 ， 如 图 16.6 所 示 ， 
不 过 在 缩 略 图 位 置 会 空 出 显示 。 
该 部 分 的 结构 代码 ( 局部) 如下: 
<dlv 1d="gallery"=> 
<span 1d= "thumbs'> 
<a href—="#"~><meg src="pics/1/1 .pe" title="1" alt="1" /></a> 
<a href—"#"><ime src="pics/1/t2.jpe" title="2" alt="2" /></a> 


<a href—"#"><1mneg src="pics/]/t10.jpe" title="10" alt="10" /></a> 
</span> 
</div> 


首先 ， 定 义 图 像 浏 览 包含 框 为 一 个 包含 块 ， 为 绝对 定位 大 图 做 参考 。 
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图 16.6 使 用 CSSs 技术 来 预览 大 图 


#gallery { 请 浏览 区 域 包含 框 样式 */ 
position: relative: 六 相对 和 定位 */ 
padding-top: 8px: 片 调 整 顶部 空 院 */ 
width:10094: 上 庆 防 止 正 浏览 需 出 现 水 平 滚动 条 操 
} 
定义 缩 略 图 包含 框 同 右 浮 动 ， 并 固定 宽度 。 
#thumbs { 读 缩 略图 包含 框 样式 */ 
width: 205px: 全 固定 宽度 */ 
float: Tight: 庄 回 右 浮 动 */ 


其 次 ， 为 每 个 缩 略 图 定制 样式 。 设 计 a 元 素 回 右 浮 动 显示 ， 并 固定 大 小 ， 借 助 padding 和 margin 属性 
调整 每 个 缩 略 图 之 间 的 空 除 ， 并 定义 边框 以 修饰 缩 略 图 。 


#thumbs a { 履 缩 略图 超 链接 样式 */ 
float: right: 主 回 布 浮动 */ 
margin: 1px 0 3px 10px: 此 调整 间距 */ 
width: 5Opx: /#z 固定 宽度 */ 
height: 5Opx: /#z 固定 高 度 */ 
border: 2px solid 三 FF: 上 访 定 义 修 饰 性 边框 */ 
} 
#thumbs a img {/* 缩 略图 样式 */ 
width: SOpx: /# 固定 宽度 */ 
height: SOpx: /* 固定 高 度 */ 
} 
#thumbs a:hover {border-color: #8A8A8A.}! 上 # 鼠标 经 过 时 变化 颜色 */ 


最 后 ， 定 义 大 图 显示 位 置 。 这 里 使 用 了 绝对 定位 的 方法 来 进行 精确 控制 ， 并 结合 padding 和 border 属 
性 来 设计 修饰 性 的 边框 线 效 打 。 设 计 选 择 般 在 鼠标 指针 移 过 缩 略图 时 ， 以 及 当 缩 略图 被 激活 时 有 效 。 


#thumbs a:hover img. #thumbs a:active img { 谍 大 图 显示 样式 */ 
position: absolute: 绝对 定位 */ 
width: 450px: 谍 固定 宽度 */ 
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height: 320px: i / 
right: 196px: 让 距离 右 侧 的 距离 */ 
top: 8px: 让 距离 顶部 的 距离 */ 
padding: 2px: 诺 补 白 大 小 */ 
border: 2px solid #8A8A8A: 此 边框 样 式 */ 


} 


第 四 ， 使 用 伪 列 布局 来 设计 主体 区 域内 左右 栏 等 高 显示 。 这 主要 利用 背景 图 像 来 模拟 两 列 等 局 显示 效 
果 。 在 主体 包含 框 中 定义 背景 图 像 沿 垂 直方 向 平 铺 ， 代 码 如 下 : 
#main fl* 伪 列 布局 样式 */ 
backeround:url(beg.gif) repeat-y center: 
} 


16.3.4 ”设计 皮肤 


在 基本 样式 表 中 ， 几 是 与 页 面 颜色 相关 的 属性 都 没有 定义 。 这 里 特意 把 所有 相关 元 素 的 边框 颜色 、 背 
景 颜色 和 字体 颜色 都 作为 皮肤 定制 的 元 素来 进行 设置 。 整 个 示例 根据 色 系 定制 了 5 套 皮肤 : colour blue.css、 
colour green.css 、colour orange.css、colour pink.css 和 colour purple.css。 

这 5 套 皮 肤 的 样式 基本 相同 ， 只 是 每 个 声明 的 属性 值 不 同 ， 主 要 是 根据 不 同 皮肤 的 色 系 进行 设置 的 。 
例如 ， 针 对 粉色 皮肤 所 设计 的 样式 表 ( colour pink.css ) 如 下 : 


#main { border: #DF368F: } 上 谍 主体 边框 颜色 */ 
#nav li a {color: #EEE.: border-color: #A8A8A8:} /* 导航 菜单 字体 颜色 ， 分隔 边框 色 */ 
#logo { 上 证 标题 栏 的 边框 色 ， 背 景 为 透明 显示 */ 
backeround: transparent: 
border-color: #DF 368F: 
} 
#logo hl { color: #DF368F: } 诺 网 页 标题 的 字体 颜色 */ 
#content h3 { 诺 栏 目标 题 的 边框 色 和 字体 颜色 ， 背 景 为 透明 显示 */ 
backeround: transparent: 
color: #8A8A8A. 
border-color: #DF 368F: 


} 

谍 定 义 二 级 标题 、 内 容 区 域 的 字体 颜色 和 背景 色 ， 以 及 超 链接 显示 样式 */ 

#links a, #content a {backeround: transparent: color: #DF368F:} 

#nav { 上 主导 航 栏 边框 色 、 字 体 颜 色 和 背景 色 */ 
backeround: #BE7B9E: 
color: #EEE.: 
border-color: #DF 368F: 

} 

#nav li a:hover, #nav li a.selected., #nav li a.selected:hover {/* 定义 导航 栏 超 链 接 字 体 颜 色 、 边 框 色 */ 
backeround: #DF368F: 
color: #EEFE.: 
border-color: #A8A8A8: 


} 
.title { color:#DF368F: } 诺 定 义 标题 颜色 类 */ 


“454。 


第 ]0 章 娄 例 实 器 : 使 用 J]QUerY 开发 Wep 应 用 


16.4 设计 交互 效果 


逻辑 层 的 开发 要 复杂 许多 ， 主 要 包括 两 个 大 的 功能 块 : 第 一 ， 控 制 网 页 样式 显示 ， 即 动态 
更 换 网 页 的 皮肤 样式 表 ; 第 二 ，XML 数据 的 读 取 和 显示 。 


16.4.1 动态 更 换 皮 肤 


动态 更 换 皮 肤 实 际 上 就 是 动态 导入 不 同 的 CSS 样式 表 文 件 。 设 计 思 路 : 在 页 面 初始 化 完成 之 后 ， 获 取 
皮肤 控制 a 元素 的 引用 指针 ， 以 及 链接 外 部 样式 表 文 件 link 的 引用 指针 。 然 后 使 用 for 语句 遍历 所 有 a 元 率 ， 
并 分 别 为 它们 乡 定 鼠标 单 击 事件 处 理 函 数 。 | 

在 该 事件 处 理 函 数 中 ， 先 获取 每 个 超 链接 包含 的 图 标 引 用 指针 ， 并 读 取 该 图 像 的 URL 地 址 。 利 用 
JavaScript 脚本 截取 图 像 名 称 字 符 串 ， 如 purple.png 中 的 purple 字符 串 。 | 

再 使 用 getAttribute("href") 方法 获取 link 元 素 导 入 的 外 部 样式 表 文 件 的 完整 路 径 ， 然 后 利用 正则 表达 式 
把 从 图 像 src 属性 中 提取 出 来 的 字符 串 蔡 换 到 link 元 素 的 href 属性 值 中 。 

最 后 ， 把 这 个 href 属性 值 赋 给 link 元 素 ， 从 而 实现 动态 改变 导入 的 外 部 样式 表 文 件 。 详 细 代码 及 其 说 

window.onload = fonction0){ /定义 页 面 初始 化 事件 处 理 果 数 | 

/获取 <div id="colours"> 包含 框 中 所 有 a 元 素 的 引用 指针 

var color = document.getElementBylId("colours").getElementsBylaeName("a"); 
/获取 页 面 中 第 二 个 link 元 素 的 引用 指针 

Var nkcss = document.getElementsByTIaeName("lmnk")|1|: 


for(var 二 0 ;i<color.length; i++){ // 裔 历 所 有 a 元素 (皮肤 控制 按钮 ) 
colorfil.onclick = (function(i){ 1/ 为 每 个 a 元 素 绑 定 鼠标 单 击 事件 处 理 函 数 | 
return function(O{ 1/ 为 了 能 够 在 循环 体内 正确 地 向 处 理 函 数 传递 循环 变量 值 ， 


1/ 这 里 定义 了 一 个 闭 包 结构 ， 并 在 闭 包 结构 中 设置 一 个 返 
/回力 数 ， 因 为 onclick 属性 赋值 必须 为 明 数 体 | 
var img = color[i].getElementsByIagName("ime"):; // 获取 当前 a 元素 包 含 的 img 元 素 的 引用 指针 


var src ~ime[0].getAttribute("sre"): /获取 当前 a 元素 包含 图 像 的 src 属性 值 | 
var a = src.lastIndexOf("/"): /获取 URL 中 名 称 前 面 的 斜 杠 位 置 | 
var b = src.lastIndexOf("."): /获取 URL 中 扩展 名 前 的 点 号 位 置 
src = src.substring(at+1,b): /利用 上 面 两 个 序号 值 截取 图 像 名 称 字 符 串 


// 获取 link 元 素 的 href 属性 值 ， 并 利用 正则 表达 式 技 术 ， 使 用 所 截取 的 图 像 名 称 字符 串 替 换 掉 
// href 属性 值 原来 的 值 。 例 如 ， 假 设 href 属性 值 为 images/colour pink.css， 而 图 像 名 称 字符 串 为 
// orange， 则 所 要 替换 而 得 到 的 新 href 属性 值 为 images/colour orange.css， 并 把 这 个 新 值 保存 在 
// 变量 newcss 中 
Var newcss = linkcss.getAttnbute("href").replace(/(\W+)\ (Ww+)(Q\.css)/,"$1 "+srct"$3"); | 
linkcss.setAttribute("href' newcss):/ 设置 link 导 入 的 外 部 样式 表 文 件 的 href 属性 值 为 newcss,， 从 而 

/实现 动态 改变 导入 的 外 部 样式 表 文 件 ， 最 终 实现 动态 换 肤 功能 


} 
DD; 


16.4.2 ”初始 化 XML DOM 控件 


下 面 尝 试 直接 使 用 JavaScript 技术 来 开发 读 取 并 显示 外 部 XML 数据 的 脚本 。 在 原来 的 电子 相册 模板 文 
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zy 以 入 门 到 精通 ( 往 课 精 编 县) 


件 (index.html ) 基础 上 ,复制 新 文件 index2.html。 打 开 index2.html 文件 ， 在 “代码 ”视图 下 导入 jQuery 


<script laneuage="]Javascript" type="text/Javascript" src="l1mages/]Jquery.]s"=></script> 


下 面 的 操作 讲解 如 何 使 用 jQuery 技术 读 取 不 同 XML 格式 中 不 同 节 点 中 的 数据 。 
首先 应 明确 : JavaScript 语言 本 身 是 不 能 读 取 XML 数据 的 ， 它 需要 借助 浏览 器 中 的 一 个 XML DOM 控 
件 ， 目前 主流 浏览 副 都 支持 该 控件 ， 但 是 不 同 浏览 右 的 支持 标准 不 同 ， 所 以 在 开始 之 前 ， 应 该 初始 化 XML 
DOM 控件 ， 并 保证 它 能 够 兼容 正 和 Firefox 浏览 器 。 
定义 一 个 加 载 外 部 XML 文件 的 函数 ， 该 函数 将 根据 不 同 浏览 器 类 型 分 别 采用 不 同 的 方法 实例 化 控件 ， 
最 后 调用 load0 方法 加 载 参数 中 指定 的 XML 文件 。 
function loadXML(xmilpath){ 初始 化 XML DOM 控件 ， 并 加 载 指定 xml 文件 
var XmlDoc=null: /定义 并 初始 化 变量 为 空 
这 (window.ActiveXObjecb{V 如 果 是 正 浏 览 器 ， 则 使 用 如 下 方法 定义 控件 
XmlDoc=new ActiveXObject("Microsott.XMLDOM"): 
telse 1f{ (document.1mplementation && document.implementation.createDocument){ 
// 如果 是 Firefox 浏览 器 ， 则 使 用 如 下 方法 定义 控件 
xmlDoc=document.implementation.createDocument("™™","",null): 
}else{ // 否则 将 提示 错误 
alert( 你 的 浏览 器 暂时 不 支持 XML DOM 控件 "): 
} 
xmlDoc.async=false; /禁止 异步 通信 
xmlDoc.load(xmlpath): // 加 载 数据 
returm XmlDoc: /返回 加 载 的 数据 


16.4.3 读 取 并 显示 分 类 导航 信息 


在 电子 相册 页 面 的 左 侧 有 一 列 分 类 导航 信息 栏 ， 该 栏 信 息 是 从 pics/class.xml 文件 中 读 取 的 。 要 实现 这 
样 的 功能 ， 用 户 应 该 考虑 以 下 几 个 问题 。 

第 一 ， 在 页 面 初次 加 载 时 ， 能 够 自动 显示 导航 数据 。 

第 二 ， 需 要 为 显示 的 数据 绑 定 单 击 事件 属性 ， 只 有 这 样 才能 把 分 类 导航 栏 与 缩 略图 包含 框 信息 紧密 联 
系 在 一 起 。 设 计 目 标 是 : 当 在 导航 栏 中 单 击 某 类 岁 标 时 ， 缩 略图 包含 框 中 的 信息 能 够 自动 更 新 ， 从 而 实现 信 
息 联 动 显 示 效 果 。 

第 三 ， 考 虑 到 导航 信息 不 确定 性 ， 也 许 用 户 分 类 信息 很 多 。 为 了 页 面 显示 美观 ， 可 以 初始 化 限制 分 类 
信息 显示 的 数目 。 

为 了 实现 上 面 所 列 的 三 个 问题 ， 不 妨 借助 JavaScript 函数 ， 把 两 个 核心 功能 块 分 开 独 立定 义 为 以 下 两 个 

第 一 个 函数 : 显示 导航 图 。 该 函数 能 够 根据 所 指定 的 xmlpath 和 more 参数 决定 所 要 显示 的 导航 图 信 
息 和 信息 记录 数 。 其 中 xmlpath 参数 表示 外 部 XML 文件 ， 而 more 参数 表示 是 否 显示 全 部 数据 。 设 计 思 路 
如下: 

首先 ， 调 用 loadXMLO 函数 加 载 指定 的 XML 文件 ， 同 时 使 用 jQuery 方法 清除 分 类 导航 包含 框 内 的 所 
有 导航 信息 。 
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其 次 ， 利 用 jQuery 选择 骼 技术 获取 导 和 人 的 XML 文件 中 的 folder 节点 集合 ， 并 使 用 each0 方法 遍历 该 
集合 。 在 遍历 过 程 中 ， 判 断 参 数 more 不 为 tue， 则 说 明 仅 显示 前 $ 条 记录 项 。 利 用 jQuery 方法 获取 当前 市 
点 所 包含 的 信息 ， 并 组 成 一 个 HTML 结构 的 字符 串 ， 字 符 串 中 包含 节点 所 要 传递 的 数据 。 

最 后 ， 把 这 个 字符 串 搬 人 分 类 导航 包含 框 中 ， 从 而 实现 动态 绑 定 分 类 信息 的 目的 。 为 了 方便 用 户 操作 ， 
在 分 类 导航 的 末尾 插入 一 个 文本 按钮 ， 用 来 决定 是 否 显 示 所 有 数据 。 在 函数 的 结尾 调用 bindMenuEventO 郴 
数 为 导航 图 像 绑 定 事件 处 理 盟 数 。 该 师 数 的 详细 代 公 和 说 明 如 下 : 


function initMenu(xmlpath,more){ // 显示 导航 图 
var oxml=loadXML(xmlpath): /调用 loadXMLO 函数 加 载 XML 文件 
$("#side menu").empty(): // 清空 分 类 包含 框 内 信息 


$(oxml).find("pics > folder").each(function(D){ // 遍历 加 载 的 XML 文档 中 的 folder 节点 
if(i>4&&more!=true) {retum false:}: 1/ 如果 显示 记录 数 大 于 5 条 ， 日 参数 more 为 他 se， 则 跳出 遍历 结构 
Var temp str: 
temp str= "<div><a href='"#' title="+$(this).attr("name")t+"><img src='pics/"+$(this).attr("name")+t"/"+$(this). 
attr("class")+" alt—"+$(this).textO+" /></a><span>"+$(this).textO+"</span></div>"; // 利用 从 节点 读 取 的 数据 组 
// 合 HTML 结构 字符 串 
$(temp_str).appendTo("#side_ menu"); // 把 该 字符 串 应 用 到 导航 包含 框 中 


}); 
// 如 果 记 录 数 大 于 5 条 ， 则 可 以 考虑 提供 如 下 操作 选项 ， 否 则 不 提供 
if($(oxml).find("pics > folder").length>5)1{ 
if(more!=true){ // 如 果 参 数 more 为 false， 则 在 底部 插入 “全 部 分 类 "按钮 ， 并 在 该 按钮 中 绑 定 本 函数 调用 ， 
/并 传递 参数 more 的 值 为 true 
temp str="<p onclick='initMenu(\"pics/class.xml\",trme):> 全 部 分 类 </p>"; 
$(temp_str).appendTo("#side_menu"):// 把 超 链接 结构 插入 包含 框 导航 信息 的 底部 
} 
if(more 一 true){ // 如 果 参 数 more 为 tue， 则 在 底部 插入 “显示 部 分 分 类 ”按钮 ， 并 在 该 按钮 中 绑 定 本 转 
/ 数 调 用 ， 传 递 参数 more 的 值 为 false 
temp_str="<p onclick='"initMenu(\"pics/class.xml\",false):> 显示 部 分 分 类 </p>": 
$(temp str).appendTo("#side menu"): 
} 
} 
bindMenuEvent(): / 调用 该 上 数 为 所 有 导航 信息 项 绑 定 鼠标 单 击 事件 处 理 男 数 
} 


第 二 个 函数 ; 为 导航 图 标 绑 定 事件 。 在 第 一 个 函数 最 后 调用 了 bindMenuEventO 员 数 ， 设 计 在 初始 化 导 
航 信 息 之 后 ， 使 用 脚本 绑 定 事件 处 理 男 数 。 设 计 思 路 如 下 : 

首先 ， 使 用 jQuery 定义 的 each0 方法 遍历 分 类 导航 包含 框 中 每 个 导航 图 标 ， 并 分 别 为 它们 绑 定 鼠标 单 
击 事件 处 理 国 数 。 在 该 事件 处 理 困 数 中 ， 先 获取 导航 图 标 包 庄 的 超 链接 元 素 a 中 的 title 属性 值 ， 该 属性 中 
包含 了 每 个 分 类 相册 的 目录 地 址 。 

其 次 ， 清 空 缩 略图 包含 枉 ， 再 次 调用 initThumbs0 困 数 ， 使 用 当前 分 类 的 目录 地 址 再 次 初始 化 显示 缩 略 


function bindMenuEventO{ / 为 导航 图 标 绑 定 事件 
$("#side menu a").each(function(i) /过 历 分 类 导航 超 链 接 
$("#side menu a")[il.onclick = (function(i){ / 为 该 超 链 接 绑 定 鼠 标 单 击 事件 处 理 困 数 
retum function(O) { // 返回 闭 包 函数 
var Url = $($("#side menu a")[i]).attr("title"): // 获取 超 链接 中 的 title 属性 
$("#thumbs").emptyO; / 清空 缩 略图 包含 框 中 的 信息 
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initThumbs("pics.xml","pics/”+HurHH"");// 再 次 调用 该 图 数 ， 使 用 新 的 分 类 目录 信息 初始 化 显示 缩 略图 


最 后 ， 为 了 实现 页 面 初始 化 时 能 够 显示 分 类 导航 信息 ， 不 要 起 记 在 页 面 初始 化 事件 中 调用 第 一 个 滑 数 ， 


以 显示 导航 图 标 。 


Window.onload = function(){ 
init Menu("pics/class.xml"): 


} 


16.4.4 ” 读 取 并 显示 缩 略 图 信息 


在 读 取 并 显示 第 略图 信息 功能 块 中 主要 包含 3 个 限 数 : 显示 缩 略 图 遇 数 (initThumbs0O )、 为 缩 略 图 绑 定 
事件 函数 (bindThumbsEvent0 ) 和 显示 大 图 图 数 ( showBigImsgO )。 下 面 分 别 进行 讲解 。 

第 一 个 时 数 ( initThumbs( ) 负责 显示 缩 略 图 。 设 计 思 路 : 首先 ， 调 用 loadXMLO 果 数 加 载 参数 中 指定 
的 目录 和 文件 ; 然后 ， 使 用 jQuery 遍历 XML 数据 文件 中 的 file 节点 ， 获 取 该 节点 中 的 相关 属性 和 信息 ， 并 
利用 这 些 信息 组 合 一 个 缩 略 图 的 HTML 结构 字符 串 ; 最 后 ， 把 该 字符 串 应 用 到 缩 略 图 包含 框 中 。 

同时 ， 利 用 分 类 导航 中 的 说 明 信 息 改写 大 图 浏览 区 中 的 标题 文本 。 当 遍历 完成 之 后 ， 再 调用 
bindThumbsEventO 困 数 为 每 个 缩 略 图 绑 定 事件 处 理 困 数 。 详 细 代 码 如 下 : 


function initThumbs(xmlpathurD{ // 显示 缩 略 图 
var oxml=loadXML(url+xmlpath): 1/ 加载 XML 数据 
$(oxml) find("pics file").each(functionO{ /这 有 历 加 载 数 据 中 f0e 节点 
Var temp str; 


temp str= "<a href=#'><1meg src="p1ics/"+$(this).parent().attr("name")+"/t"+$(this).text()+"" title=""+$(this). 
textO+" alt="+$(this).textO+" /></a>"; 获取 fle 节点 中 的 属性 和 信息 组 成 缩 略图 HTML 结构 代码 字 


/ 符 串 
$(".title").text($(this).parent().attr("class")); // 获取 fe 节点 中 class 属性 值 并 改写 大 图 浏览 区 标题 
$(temp str).appendTo("#thumbs"): /把 组 成 的 缩 略 图 HIML 结构 代码 应 用 到 缩 略 图 包含 框 中 
}); 
bindThumbsEventO: /为 每 个 缩 略 图 绑 定 事件 处 理 肯 数 
第 二 个 六 数 (bindThumbsEvent0O ) 负责 为 每 个 缩 略 图 绑 定 事件 。 有 具体 代码 如 下 : 
function bindThumbsEventO{ / 为 缩 略 图 绑 定 事件 
$("#thumbs a").each(function(i){ /遍历 缩 略 图 中 的 超 链 接 
$("#thumbs a")[il.onclick = (function(i){ / 为 超 链 接 绑 定 鼠标 单 击 事件 处 理 函 数 
return functionO{ /多 返回 财 包 函数 
var url 二 $($("#thumbs ime")[i]).attr("sre"):// 获取 缩 略 图 的 src 属性 值 
$(".big_ pic").emptyO: / 清空 大 图 包含 框 
showBigImsg(ur): / 把 缩 略图 的 src 属性 值 作为 参数 ， 重 新 显示 大 图 
上 
DO:; 
} 
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第 三 个 胃 数 (showBigImg0 ) 负责 显示 大 图 。 在 前 面 小 节 中 曾经 使 用 CSS 特效 来 设计 缩 略 图 预览 功能 ， 
但 是 它 有 很 多 缺陷 : 一 是 只 能 实现 鼠标 移 过 时 预览 大 图 ， 无 法 定义 其 他 操作 方式 ( 如 单 击 等 ); 二 是 当 预 览 
大 图 时 ， 纵 略图 会 消失 ; 三 是 大 图 和 缩 略 图 其 实 就 是 一 个 图 ， 所 以 无 法 真正 实现 大 图 和 缩 略 图 的 分 离 ， 当 缩 
略图 很 多 时 ， 将 为 数据 加 载 带 来 极 大 的 负担 ， 所 以 不 建议 使 用 CSS 特技 的 方法 来 设计 缩 略 图 预览 

通过 函数 的 方式 来 设计 大 图 预览 功能 ， 灵 活性 非常 大 。 当 用 户 单 击 某 个 缩 略 图 时 ， 会 调用 该 缩 略 图 的 
鼠标 单 击 事件 处 理 函数 ， 并 把 缩 略 图 的 sre 属性 值 作为 参数 传递 给 showBigImgO。 从 而 实现 显示 大 图 的 效 


function showBieIme(urD){ / 显示 大 图 
var a 二 UrllastIndexOf(Wt");// 获取 缩 略图 中 “ 放 ” 的 位 置 
b = url.substring(0,a): 1/ 截取“/t” 位 置 前 的 字符 串 
c= url.substrng(at2): 1/ 截取“/t” 位 置 后 的 字符 串 
var temp str: 
temp str= "<img src="+b+"/"+ct+" alt="+ct" />"; // 设置 大 图 的 src 属性 值 字符 串 
$(temp str).appendTo(".big pic"): // 把 大 图 应 用 到 预览 框 中 

， 
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